JQuery: выпадающее меню с использованием cookie. Как создать боковое выпадающее меню с помощью CSS и jQuery Как сделать выпадающее меню jquery
Получив несколько просьб, я решил написать статью о том, как можно сделать выпадающее меню. Самый лучший и простой способ создать такое меню - это положиться на 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 и 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 .
Для того, чтобы самому написать навигацию в виде вертикального выпадающего меню на jQuery с выпадающим списком подкатегорий, необходимо понять сам принцип работы этого механизма. Но для начала разберем структуру навигации:
Навигация Navigation
Как вы уже догадались, наше выпадающее меню построено на базе маркированных списков. При наведении курсора мыши на тег
- test 1
- test 2
- test 3
- test 4
Но как, спросите вы? Да все на самом деле очень просто. Для начала давайте разберемся с таблицей стилей нашего списка навигации, выглядеть она будет следующим образом:
Body { background: rgb(244, 244, 244);font-family: Verdana;font-weight: 100; } /*---Навигация---*/ #menu { width: 200px; margin: 0; padding: 2px; } #menu li { list-style-type: none; } .menu { position: relative; background: chocolate; background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); border: 1px solid #2AC4B3; } .menu:hover { background: #00c; background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); } .menu span { width: 11px; height: 11px; display: block; position: absolute; top: 8px; right: 10px; cursor: pointer; } .menu ul { width: 150px; margin: 0; padding: 1px; position: absolute; top: -1px; left: 198px; } .menu ul li { background: chocolate; background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); border: 1px solid #fff; } .menu ul li:hover { background: #00c; background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); } .menu a { padding: 5px; display: block; text-decoration: none; color: white; } .menu a:hover { color: white; } /*---END---*/
Из таблицы стилей видно, что изначально выпадающий список не скрыт, но этот момент мы и будем исправлять при помощи :
$(document).ready(function(){ $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")"); $("#menu li").hover(function(){ $(this).children("ul").show(); /*Эквивалент $("ul", this).show();*/ $(this).find("span").css("background", "url("right.png")"); /*Эквивалент $("span", this).css("background", "url("right.png")");*/ },function(){ $(this).children("ul").hide(); /*Эквивалент $("ul", this).hide();*/ $(this).find("span").css("background", "url("down.png")"); /*$("span", this).css("background", "url("down.png")");*/ }) })
Теперь подробно разберем jQuery код выпадающего меню, т.к. возможно кому-то он будет не совсем понятен. В самом начале прописана следующая конструкция:
$(document).ready(function(){ })
В ней прописываются команды, которые необходимо выполнять после полной загрузки страницы. Сделано это для того, чтобы не появлялись разного рода ошибки, при невозможности найти какой-либо объект из-за того, что он банально ещё не загрузился.
$(".menu ul").hide();
Что означает эта запись? Конструкция «$()» позволяет произвести выборку элементов. Следовательно в самом начале нам необходимо скрыть наш выпадающий список. Мы берем конструкцию «$()» и пишем в ней интересующий нас объект. В нашем случае этим объектом будет маркированный список с классом «menu». Далее прописываем метод «hide()», позволяющий скрыть интересующий нас объект.
$(".menu span").css("background", "url("down.png")");
Что она делает? Она ищет тег родительскому элементу которого присвоен класс «menu» и, при помощи метода "css("background", "url("down.png")")”, происходит присваивание свойству стиля «background» значения «url("down.png")». "down.png" - это иконка, показывающая, что список может раскрываться.
Затем идет конструкция, которая и будет раскрывать наш список, выглядит она следующим образом:
$("#menu li").hover(function(){ $(this).children("ul").show(); $(this).find("span").css("background", "url("right.png")"); },function(){ $(this).children("ul").hide(); $(this).find("span").css("background", "url("down.png")"); }
Мы ищем тег родительскому элементу которого присвоен id="menu”. Далее идет метод "hover” и в скобках две функции. Первая функция будет выполняться при наведении курсора мыши, а вторая выполниться, если курсор мыши покинет интересующий нас элемент.
В первой функции прописано:
$(this).children("ul").show(); $(this).find("span").css("background", "url("right.png")");
Конструкция "$(this)” означает, что нас интересует тот элемент, на который мы в данный момент навели (this от англ. этот). А навели мы на тег
После этого у тега мы ищем потомков, а именно: тег и у него меняем фон на другую иконку.
После этого прописана функция, которая делает все, как было изначально, после того, как курсор мыши покинет элемент списка:
Function(){ $(this).children("ul").hide(); $(this).find(«span»).css("background", "url("down.png")"); }
Чтобы написанный код на jQuery заработал и наше выпадающее меню работало корректно, необходимо скачать с сайта jquery.com библиотеку и подключить её, прописав после открывающего тега строку .
Ну вот и все! В заключении хочу отметить, что если ваш сайт довольно увесист, то возможно, скрипт будет запускаться слишком поздно (сайт будет долго грузиться) и пользователи будут видеть, как сначала раскрывается полностью, а только потом скрывается, что, согласитесь, очень некрасиво. Следовательно, необходимо вынести все jQuery команды за эту конструкцию: «$(document).ready(function(){})». Выглядеть это будет следующим образом:
$(document).ready(function(){ }) $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")"); $("#menu li").hover(function(){ $(this).children("ul").show(); $(this).find(«span»).css("background", "url("right.png")"); },function(){ $(this).children("ul").hide(); $(this).find(«span»).css("background", "url("down.png")"); })
Подключение нашего скрипта необходимо перенести из тега в самый конец, перед закрывающим тегом , либо можно подключить скрипт сразу после маркированного списка.
(cкачиваний: 314)
С помощью 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: +/- при закрытом/ открытом меню, но вы можете добавить изображение или любую другую конструкцию. Посмотреть пример того, что у нас получилось, можно здесь
Как всегда, готов выслушать вопросы и попробовать ответить на них. Всего доброго, всех благ.