Как создать боковое выпадающее меню с помощью CSS и jQuery. Выпадающее меню на jQuery Многоуровневое выпадающее меню jquery по клику

Сегодня я хотел бы сделать подборку относительно нового поколения навигации для сайта - полноэкранные меню . Они применяются в случаях, когда самой навигации и нет на странице, есть только одна кнопка, при нажатии на которую раскрывается меню. Похожий принцип можно увидеть в -фреймворке , когда строка навигации перестает помещаться, блок со списком пунктов меню просто скрывается. На ее месте появляется кнопка с изображением, как правило, трех полосок. При нажатии выпадает полное меню. Во многих современных сайтах меню постоянно скрыто даже на больших экранах. Сделано это, чтобы не нагружать страницу. Хотя не стоит теперь на всех своих проектах делать так. Если меню носит второстепенное значение, можно и скрыть, но если же у вас большой сайт со сложной структурой, этот вариант лучше не использовать. Итак. С общим принципом работы разобрались, но данный тип меню довольно стандартен, хочется чего-то новенького. Не так давно я начал замечать сайты, у которых навигация не просто выпадает, а открывается полностью во весь экран в попап-окне . Что-то вроде популярных слайд-панелей , но все это дело занимает всю площадь рабочей области. За сайтами начали появляться и отдельные jQuery плагины и css3 решения, о которых, собственно, этот топик.
Лично мне такая реализация меню навигации очень нравится, так как она удобная для пользователей с мобильными устройствами и очень эффектно выглядит на больших мониторах. Сайтов с полноэкранными меню появляется все больше, бесплатных jQuery плагинов также становится больше и концепция постепенно становится трендом.
Итак. К вашему вниманию 20 jQuery плагинов полноэкранного меню в popup окне.

Full-Screen Pushing NavigationОдин из лучших, на сегодняшний день, бесплатный скрипт полноэкранной навигации . При нажатии на кнопку «Меню» появляется навигация, плюс предусмотрен блок с контактами, это очень удобно для посетителя сайта, так как путь до звонка становится на 1 клик меньше. Хочу заметить, что скрипт и на мобильных устройствах блок с контактами становится под навигацией.
Очень приятным дополнением к дизайну окна является анимированная SVG иконка. По умолчанию она имеет вид трех полосок, но при нажатии иконка трансформируется в стрелку, которая показывает, что меню можно скрыть.Rounded Animated NavigationЕще один очень крутой jquery скрипт полноэкранной навигации от тех же разработчиков, что и плагин выше. Данный скрипт имеет очень классный и необычный эффект появления. При нажатии на кнопку меню, от иконки, с помощью css3, исходит волна через весь монитор, которая перерастает в фон пунктов меню. Такой же эффект скрытия.
Эта навигация отлично работает на мобильных устройствах, но учитывая, что эффект появления довольно тяжелый, думаю, на старых телефонах все будет тормозить (Я не проверял, так что буду рад, если вы напишите свой опыт в комментариях).

Perspective Page View NavigationЕще один эффектный скрипт полноэкранного меню . При нажатии на кнопку меню, видимая часть страницы отодвигается в сторону с эффектом , на освободившемся пространстве появляется меню. Есть несколько эффектов анимации появления.
К сожалению, на мобильных телефона работает некорректно: если много пунктов меню, при этом они не помещаются в экран, то вертикальная прокрутка не появляется и навигация просто обрезается.

Full Page Intro & NavigationДовольно простой скрипт полноэкранного меню . Не могу сказать, что очень эффектный, но на мобильных устройствах будет удобным.

Fly Side MenuЕще одно полноэкранное меню , при котором видимая часть с 3D эффектом отодвигается в сторону, но уже от других разработчиков. В отличии от предыдущего аналогичного скрипта, этот должен хорошо работать на мобильных устройствах, так как если меню не помещается в экран, появляется вертикальная прокрутка.

С помощью JQuery- классика, статей на эту тему написано масса. Я же попробовал чуть усложнить задачу, добавив возможность оставаться разделам меню открытыми (или закрытыми, в зависимости от выбора пользователя) при перемещении по сайту.
Для решения этой задачи я решил воспользоваться плагином JQuery Cookie . Преимущество данного плагина в том, что операция совершается на стороне клиента, что, в свою очередь, уменьшает нагрузку на сервер. Минус- если у пользователя отключен JS, плагин не сработает. Но данный вариант я не рассматриваю, так как тогда пропадает вообще весь смысл выпадающего меню. Итак, начнем.
Для начала нам необходимо подключить сам фреймворк JQuery и плагин JQuery Cookie:

Код: HTML

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

Код: HTML

Первый заголовок

Первая ссылка

Вторая ссылка

Третья ссылка

Второй заголовок

Первая ссылка

Вторая ссылка

Третья ссылка

Третий заголовок

Первая ссылка

Вторая ссылка

Третья ссылка

Четвертый заголовок

Первая ссылка

Вторая ссылка

Третья ссылка

Ну и так до бесконечности. Теперь- самое интересное. В коде добавлю немного комментариев, дабы было примерно понятно, чопачом

Код: JS

$(document).ready(function(){
if($.cookie("num_open_ul")){ // проверили, есть ли запись в печеньках
if($.cookie("num_open_ul") != 0){ // и эта запись не равна 0
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("active_navigation");
}
};
$("#navigation h2.navigation_head").click(function(){ // при клике сработает эта функция
if(!$(this).next().is(":visible")){
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // если другие открыты- закрыли все, кроме текущего
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(this).toggleClass("active_navigation").siblings("#navigation h2.navigation_head").removeClass("active_navigation"); // открытому добавили класс, чтобы сменить стиль
setTimeout(fncookie, 600); //сама запись в печеньки с задержкой, дабы скрипт до записи успел завершить работу (500мс- скорость, задержка- 600мс)
});
function fncookie(){ // сама функция записи
var number_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function(){
i++;
if($(this).is(":visible")){
number_open_ul = i;
}
$.cookie("num_open_ul", number_open_ul, {expires:3, path:"/"}); // хранить 3 дня для всего сайта.
});
}
});

То есть теперь, если пользователь открыл меню, ушел с сайта и зашел на него снова через пару дней, меню все так же для него будет оставаться открытым.
Ну и напоследок у нас остался небольшой штрих: собственно, css- стили. Вы уж делайте на свой вкус, в примере я взял готовый дизайн с одного из проектов

Код: CSS

#navigation {
margin: 80px auto;
width: 250px;
}
#navigation h2, #navigation h2.navigation_head {
font-size: 18px;
font-weight: bolder;
background-color: #ffb6c1;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ffe9e9),color-stop(100%,#ffb6c1));
background-image: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -moz-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -o-linear-gradient(#ffe9e9,#ffb6c1);
background-image: linear-gradient(#ffe9e9,#ffb6c1);

padding: 5px 3px 6px 3px;
margin: auto;
position: relative;
}
#navigation h2.navigation_head:after {
position: absolute;
right: 5px;
color: #550000;
content: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover {
cursor: pointer;
}
.active_navigation {
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !important;
background-image: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: -moz-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: -o-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: linear-gradient(#ffb6c1,#ffe9e9) !important;
}
.active_navigation:after {
position: absolute;
right: 5px;
content: "cssd" !important;
}
.navigation_body {
display:none;
}
#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}
* html #navigation ul li{
height: 1%;
}
#navigation div.navigation_body ul li {
margin-left: 10px;
}
#navigation a {
font-family: "Times New Roman";
display: block;
color: #918871;
padding: 3px;
background-color: #ffe3e0;
border-bottom: 1px solid #fff;
text-decoration: none;
}
#navigation a:hover {
color: #585858;
background-color: #ffb6cc;
}

Если кто обратил внимание, здесь я попробовал использовать свойство content: +/- при закрытом/ открытом меню, но вы можете добавить изображение или любую другую конструкцию. Посмотреть пример того, что у нас получилось, можно здесь

Как всегда, готов выслушать вопросы и попробовать ответить на них. Всего доброго, всех благ.

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

Давайте сперва рассмотрим HTML-разметку

Простое выпадающее меню основанное на jQuery Простое выпадающее меню

Home
Products
Services
Contact Us

Content

Есть простой неупорядоченный список ul , его теги li - это основа навигационного меню. Далее добавьте нижеприведенный код в соответствующий тег li , этим вы структурируете выпадающий список .

Если вы внимательны, вы отметите две вещи:

1. У тега li присутствует класс dropdown .
2. Ссылка-родитель имеет класс ddIcon .

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

В стилях меню нет ничего особенного - обычные стили:

Container { width: 960px; margin: 0 auto; padding-top: 50px; } .container h1 { font-size: 30px; color: #666; margin-bottom: 1em; } .container nav { border-radius: 4px; background-color: #fff; height: 37px; } .container nav ul li { position: relative; float: left; } .container nav ul li a { font-size: 12px; text-decoration: none; font-weight: bold; text-transform: uppercase; color: #545454; padding: 13px 15px; display: block; border-right: 1px solid #f9f9f9; } .container nav ul li a.ddIcon { background: transparent url("dd.png") no-repeat 86% 52%; padding: 13px 25px 13px 15px; } .container nav ul li a:hover { background-color: #cc333f; color: #fff; } .container nav ul li.active a { background-color: #cc333f; color: #fff; } .container nav ul li:first-child a { border-radius: 4px 0 0 4px; } .container nav ul li .subNav { position: absolute; background-color: #cc333f; padding: 15px 15px 20px; width: 172px; left: 0px; top: 38px; display: none; } .container nav ul li .subNav .navSection { padding: 5px 0; } .container nav ul li .subNav h4 { margin-bottom: 0.5em; } .container nav ul li .subNav h4 a { font-size: 11px; color: #edc951; text-transform: capitalize; border-bottom: 1px solid #D33B47; padding: 7px 10px; } .container nav ul li .subNav h4 a:hover { color: #edc951; } .container nav ul li .subNav h4 a span { float: right; font-size: 10px; color: #fff; -moz-transition: color 0.5s ease 0s; } .container nav ul li .subNav h4 a span:hover { color: #390206 } .container nav ul li .subNav a { float: none; border: none; display: block; text-transform: capitalize; color: #fff; padding: 7px 15px; -moz-transition: color 0.5s ease 0s; line-height: 1.3; } .container nav ul li .subNav:hover { color: #390206; } .container .section { clear: both; padding: 10px; } .container .section article p { font-size: 16px; color: #488fb8; line-height: 1.3; } .container .section article header p { padding-top: 20px; font-size: 20px; color: #333; line-height: 1.3; margin-bottom: .4em; }

Теперь необходимо оживить выпадающее меню . В этом нам поможет простейшая функция jQuery.

$(function(){ $("li.dropdown").hover(function() { if ($("this:has(div.subNav)")){ $(".subNav").css({"display":"none"}); $(".subNav", this).css({"display":"block"}); $("nav ul li").css({"position":"relative", "z-index":"1001"}); $(this).addClass("active"); } }, function(){ $(".subNav").css({"display":"none"}); $(this).removeClass("active"); $("nav ul li").css({"position":"relative", "z-index":"1"}); }); });

Для каждого элемента списка возможно создать свое выпадающее меню: внутри элемента li расположите блок с классом.subnav , а также самому li присвойте класс.dropdown .

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

Принцип раздвижного меню в том, что пункты меню разбиваются на группы, и эти группы скрываются, видно только название группы. При нажатии на название, выезжает список из определенного количества пунктов.

Как сделать раздвижное меню? В этом нам поможет - jQuery . С помощью него, все будет работать плавно и красиво, как в примере выше. Приступим к реализации раздвижного меню и выполним несколько пунктов.

jQuery скрипт

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

После библиотеки добавляем скрипт. который будет совершать анимацию.Скриптов будет 3, каждый из них по разному совершает анимацию.

$(document).ready(function() { $("#menu ul").hide(); $("#menu li span").click(function() { $("#menu ul:visible").slideUp("normal"); if (($(this).next().is("ul")) && (!$(this).next().is(":visible"))) { $(this).next().slideDown("normal"); } }); });

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

$(document).ready(function() { $("#menu ul").hide(); $("#menu li span").click(function() { $(this).next().slideToggle("normal"); }); });

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

$(document).ready(function() { $("#menu ul").hide(); $("#menu li").hover(function() { $(this).children("ul").slideToggle("normal"); }); });

HTML разметка

Теперь, в нужном месте на Вашем сайте, нужно вывести HTML -разметки. Ну или немного переделать свою, чтобы она стала похожей как в примере.

Сложного ничего нет, все организовано с помощью - ul -списков.

CSS стили

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

Ul#menu, ul#menu ul{ list-style:none; margin: 0px; padding: 0px; width: 250px; -webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2); -moz-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);} ul#menu a,ul#menu span{display: block; text-decoration: none;} ul#menu li {margin-top: 1px;} ul#menu li a,ul#menu li span{ background: #1ba600; color: #fff; padding: 7px;} ul#menu li a:hover,ul#menu li span:hover{background: #333;} ul#menu li ul li a{ background: #eee; color: #000; padding-left: 20px;} ul#menu li ul li a:hover{background: #ddd;}

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

На этом все, спасибо за внимание. 🙂

В этой статье мы будем разрабатывать простенькое выпадающее меню при помощи jQuery. Для начала посмотрите на демо-файл. Надеемся, что вы хоть немного знаете основы jQuery и CSS. Ключевыми аспектами создания данного выпадающего меню заключаются в применении параметров CSS: position, top, left, z-index.

Используя эти параметры, мы можем быть уверены в том, что наше меню будет появляться точно под ссылкой, на которую был наведен курсор, и точно будет накрывать все остальные элементы. Мы также сделаем так, чтобы меню отображалось при наведении курсора, и исчезало тогда, когда курсор отведен в сторону. Для реализации данных событий, мы будем использовать функции jQuery: mouseenter и mouseleave. И это все, что нам понадобится для создания выпадающего меню!

Демо-файл финального результата и ссылка на скачивание

HTML-код

Ознакомьтесь с HTML-кодом выпадающего меню:

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

CSS-код

Ознакомьтесь с кодом CSS:

/* CSS For Dropdown Menu Start */
ul
{
list-style:none;
padding:0px;
margin:0px
}

ul li
{
display:inline;
float:left;
}

ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:bold;
font-size:12px;
font-family:verdana;
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #560E00;
}

ul li a:hover
{
color:#cccccc;
background:#560E00;
font-weight:bold;
text-decoration:none;
display:block;
width:100px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #000000;
}

ul li.sublinks a
{
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;
}

ul li.sublinks a:hover
{
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
}

ul li.sublinks
{
display:none;
}

/* CSS For Dropdown Menu End */

Большая часть кода CSS используется для форматирования меню (вы можете придать внешний вид меню по собственному усмотрению), но здесь также есть некоторые важные моменты:

1 – Удаление знаков табуляции посредством list-style:none;

2 – Нам известно, что списки – это блочные элементы и всегда отображаются в вертикальном порядке. Для того, чтобы сделать расположить их горизонтально, мы придаем им параметр строчных элементов и выравниваем их по левой стороне с помощью кода:

Display:inline;
float:left;

3 – По умолчанию ссылки являются строчными элементами. Мы же переделываем их в блочные элементы при помощи display:block (таким образом, мы теперь можем задать им значение ширины).

4 – Прячем все меню посредством:

Ul li.sublinks
{
display:none;
}

jQuery

Представьте былые времена, когда выпадающие меню были реализованы посредством грубого кода javascript, к тому же там была нужна куча ненужного кода. Но сегодня все, что нам нужно, это jQuery:

$(function(){

Submenu.css({
position:"absolute",

zIndex:1000
});

Submenu.stop().slideDown(300);

$(this).slideUp(300);
});
});
});

Очень интересная и простая штука. Давайте мы вам объясним, как это работает. Для начала и как обычно, мы охватываем наш код в контроллер jQuery:

$(function(){
...
});

Наш код активизируется, когда курсор мыши будет наведен (функция mouseenter) на элемент, которому присвоен класс выпадающего меню ($(".dropdown")). В нашем случае это ссылка в меню:

$(function(){
$(".dropdown").mouseenter(function(){
........
});
});

Давайте убедимся, что мы спрятали (hide()) все предыдущие открытые меню до того, как курсор мыши перескочит на следующую ссылку:

$(".sublinks").stop(false, true).hide();

Обратите внимание на функцию остановки, которая помогает нам отобразить только одно выпадающее меню в момент, когда курсор мыши переходит по разным ссылкам в меню. Если мы не воспользуемся данной функцией, то каждое выпадающее меню так и останется открытым вплоть до того момента, пока мы полностью не уведем курсор мыши с меню. Это будет создавать некоторые накладки, поэтому нам следует избегать этого. Далее мы берем текущее раскрытое выпадающее меню и назначаем переменную:

Var submenu = $(this).parent().next();

Вот что будет в коде HTML:

Когда курсор мыши наведен на ссылку с классом dropdown, мы двигаемся обратно при помощи parent() и останавливаемся на "li", а далее при помощи next(), мы оказываемся на нужном выпадающем меню, а "li" уже будет с классом суб-ссылок (sublinks). Таким образом, jQuery облегчает нам процесс поиска того, какое выпадающее меню отображать, когда курсор мыши наведен на определенную ссылку.

Submenu.css({
position:"absolute",
top: $(this).offset().top + $(this).height() + "px",
left: $(this).offset().left + "px",
zIndex:1000
});

Код очень важен, так как он гарантирует нам то, что выпадающее меню отображается точно под определенной ссылкой. Если позиция выставлена на absolute, мы можем позиционировать элемент в любой области нашей страницы. Далее мы определяем верхнюю позицию ссылки, на которую наведен курсор при помощи $(this).offset().top (это относится к текущему пункту меню, на который наведен курсор), и добавляем к нему такое значение height, чтобы меню отображалось точно под ссылкой. Нечто похожее проделываем и с параметром left. Затем мы используем z-index для того, чтобы быть уверенными, что наше меню будет отображено поверх остальных элементов.

Submenu.stop().slideDown(300);
Конечно, вы можете использовать и другие варианты анимации типа fadeIn, анимацию с помощью собственных стилей и так далее.

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

Submenu.mouseleave(function(){
$(this).slideUp(300);
});

Для того чтобы спрятать выпадающее меню, мы используем slideUp, антоним к slideDown. Учитывайте то, что submenu – это переменная, которую мы создали для определения конкретного выпадающего меню.

Таким образом, у нас получилось привлекательное одноуровневое выпадающее меню на jQuery .

Как создать боковое выпадающее меню с помощью CSS и jQuery. Выпадающее меню на jQuery Многоуровневое выпадающее меню jquery по клику

Похожие статьи

Читайте также