Как сделать всплывающее меню
Блог
Делимся с Вами своими знаниями и новостями

#Cruelten » Блог » Web » Как сделать всплывающее меню

07.06.2013

Как сделать всплывающее меню

Как сделать всплывающее меню — подробный анализ двух вариантов создания всплывающего меню. С использованием CSS3 и JavaScript, либо без использования последнего.

Итак, дорогие друзья! Сегодня мы с Вами будем обговаривать такие важные на данный момент вещи в программировании, как меню, а точнее разновидности его, а именно всплывающие менюшки. Все мы прекрасно понимаем, что возможность красиво и функционально преподнести информацию для пользователя считается хорошей панацеей любого успешного интернет-проекта.

Прежде, чем мы приступим к написанию кода, давайте посмотрим на те разновидности всплывающих меню, которые существуют на данный момент. Все они делятся на несколько видов и будут внимательным образом рассмотрены мной в данной статье.

Виды всплывающих меню

  • Всплыввающее меню при наведении — вид меню, при котором оно всплывает тогда, когда пользователь наводит указатель мыши на пункт меню. При этом меню сворачивается, если указатель покидает область меню.
  • Всплывающее меню при щелчке — вид меню, в котором оно всплывает только тогда, когда пользователь нажимает на какой-либо пункт меню мышкой. Сворачивается при нажатии мышкой на пустой области.

Как видите, видом наших менюшек всего два. Но подход в их реализации существенно отличается. Это связано с тем, что первый тип можно реализовать как с помощью CSS +  JavaScript, так и просто, ипользовав исключительно функционал CSS3.

Что же касается всплывающего меню по щелчку мышки, то здесь без использования JavaScript ничего не получится. Поэтому все два типа меню мы разберем. Так как сейчас очень популярно меню только на CSS, то не упустим возможности показать все преимущества этого способа.

Всплывающее меню при наведении

В данной описательной части мы будем создавать меню, всплывающее при наведении на пункты меню указателя мыши. В своей работе мы будем использовать исключительно возможности CSS, не прибегая к услугам JavaScript. Меню само по себе довольно простое, а самое главное понятное. Благодаря ему, Вы сможете создавать свои офигенные менюшки. Фишка его заключается в том, что оно позволяет в появляющихся областях размещать любую информацию. Вы сможете помещать туда div-ы, таблицы и блоки текста. Картинки и иной медиаконтент, включая видео.

Всплывающее меню при щелчке мыши

Мы разобрали свойство появление меню при наведении мыши. А как быть, если нам нужно чтобы система понимала не наведение указателя мыши, а щелчок кнопки мыши? Здесь без использования свойств JavaScript нам не обойтись, как бы это не было прискорбно. Но не стоит отчаиваться. Код, который я приведу здесь будет понятен даже младенцу. Что от нас требуется, так это заучить специфику его действия, либо просто перенести на сайт. А JavaScript в этом меню очень и очень мало. Так что, поехали!!!

<div class="vypad_menu"><a class="main-item" href="javascript:void(0);" tabindex="1" >МЕНЮ</a> 
<ul class="sub-menu"> 
   <li><a href="#1">WoWClass</a></li> 
   <li><a href="#2">Diablo 3</a></li> 
   <li><a href="#3">WoW PvP</a></li> 
</ul></div>

В нашем меню мы используем следующее.  Присваиваем нашему контейнеру класс .vypad_menu — благодаря этому мы сможем визуально оформить наше меню так, как нам того хочется. Также мы присваиваем нашей главной ссылке класс .main-item. Это необходимо, чтобы мы могли управлять нашими свойствами CSS3, такими как :active и :focus. Именно благодаря этим волшебным свойствам, мы сможем сделать нашем меню всплывающим по щелчку мыши.

href="javascript:void(0);

Данная строчка кода, это единственное, что мы берем от JavaScript. Она нужна для того, чтобы при щелчке мыши мы не обновляли страницу, и ничего не происходило. Данная команда равносильна следующему коду onclick=’return false;’. При срабатывании щелчка мыши по пункту меню, будет просто показываться высплывать меню, а перехода по ссылке не произойдет.

tabindex="1"

Дополнительный параметр. Весьма существеннен для нашего меню, так благодаря ему мы заставляем наше появившееся меню не исчезнуть, а задержаться, пока не произойдет следующее действие пользователя.

Теперь давайте рассмотрим наш CSS. Все комментарии непосредственно в коде.

/*Выпадающее меню*/
.sub-menu 
{ 
   display: none; /*Прячем наше меню по умолчанию*/
   margin-top: 10px;
} 
.sub-menu li {   /*Придаем стили нашим выпадающим пунктам меню.*/
position: relative; 
   list-style: none;
height: 40px;
border: 5px solid #838383;
border-radius: 10px;
-moz-box-shadow: 0 0 59px rgba(255, 2, 2, 0.5);
-webkit-box-shadow: 0 0 59px rgba(255, 2, 2, 0.5);
box-shadow: 0 0 59px rgba(255, 2, 2, 0.5);
text-align: center;
text-transform: uppercase;
background: url(bg_sprite.jpg) repeat-x center top transparent;
z-index: 10000;
margin-top: 1px;

} 
/*Важнейшая часть кода. При щелчке по меню, а также при активном пункте меню мы меняем display: none, на block, что позволяет нам увидеть наше меню*/
.main-item:focus ~ .sub-menu, 
.main-item:active ~ .sub-menu, 
.sub-menu:hover 
{ 
   display: block; 
} 
/*Конец выпадающего меню*/

Итог

Мы рассмотрели два вида появляющегося меню. Одно, по щелчку мыши, другое при наведении указателя мыши на пункты меню. Выбирайте сами, какое из них Вам больше нравится. Удачи!

Метки: ,

Свяжитесь с нами уже сейчас

Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению Вашего проекта в WhatsApp или Telegram. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, пишите в Telegram или в WhatsApp.