Выпадающее меню с помощью javascript. JQuery: выпадающее меню с использованием cookie. Простое выпадающее меню

В этой статье мы будем разрабатывать простенькое выпадающее меню при помощи 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- классика, статей на эту тему написано масса. Я же попробовал чуть усложнить задачу, добавив возможность оставаться разделам меню открытыми (или закрытыми, в зависимости от выбора пользователя) при перемещении по сайту.
Для решения этой задачи я решил воспользоваться плагином 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

#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;
}

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

Это прекрасный способ добиться минимализма без отвлекающих факторов. Сегодня создадим такое меню самостоятельно.

Чтобы создать меню навигации, давайте сначала ознакомимся с настройками:

Animation Menu Demo

Для начала необходимо загрузить Normalize.css и настроить стили браузера по умолчанию, убедиться, что меню выглядит одинаково во всех браузерах. Для отображения стрелки перед элементами меню с подпунктами будем использовать FontAwesome . Для переключения классов в меню загружаем jQuery и перемещаем весь пользовательский jQuery код в script.js. Последняя ссылка является основной таблицей для веб-проекта.

Иконка-гамбургер является общим атрибутом навигации по сайту. Часто она создается при помощи иконочного шрифта, такого как FontAwesome, но в этом уроке мы добавим некоторую анимацию, а потому будем создавать ее с нуля. Наша иконка-гамбургер представляет собой тег span, содержащий три div класса, отображающийся в виде горизонтальных полос.

Стили выглядят следующим образом:

Toggle-button { position: fixed; width: 44px; height: 40px; padding: 4px; transition: .25s; z-index: 15; } .toggle-button:hover { cursor: pointer; } .toggle-button .menu-bar { position: absolute; border-radius: 2px; width: 80%; transition: .5s; } .toggle-button .menu-bar-top { border: 4px solid #555; border-bottom: none; top: 0; } .toggle-button .menu-bar-middle { height: 4px; background-color: #555; margin-top: 7px; margin-bottom: 7px; top: 4px; } .toggle-button .menu-bar-bottom { border: 4px solid #555; border-top: none; top: 22px; } .button-open .menu-bar-top { transform: rotate(45deg) translate(8px, 8px); transition: .5s; } .button-open .menu-bar-middle { transform: translate(230px); transition: .1s ease-in; opacity: 0; } .button-open .menu-bar-bottom { transform: rotate(-45deg) translate(8px, -7px); transition: .5s; }

Иконка имеет фиксированное положение и не меняет его при прокрутке страницы. Также имеет z-index 15, а это значит, что она всегда будет поверх других элементов. Состоит из трех bars, каждый из которых разделяет другие стили. Поэтому мы переместим каждый bar в класс.menu-bar. Остальные стили перемещаем в отдельные классы. Магия происходит тогда, когда мы добавляем другой класс в тег span, который является открытым. Мы добавляем его с помощью jQuery следующим образом:

$(document).ready(function() { var $toggleButton = $(".toggle-button"); $toggleButton.on("click", function() { $(this).toggleClass("button-open"); } ); } );

Для тех, кто не знаком с jQuery - мы инициализируем переменную с $toggleButton, которая содержит нашу иконку. Сохраняем ее в переменной без необходимости использования JavaScript. Затем мы создаем event listener, который учитывает клики по иконке. Каждый раз, когда пользователь кликает по иконке-гамбургеру, event listener запускает функцию toggleClass() , которая переключает класс.button-open.

Когда добавлен класс.button-open, мы можем использовать его для изменения способов отображения элементов. Мы используем CSS3 translate() и rotate() функции, чтобы верхняя и нижняя полосы вращались на 45 градусов, а средняя полоса сдвигалась вправо и исчезала. Вот какую анимацию можно настроить:

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

• Home
• About
• Blog
• Click The Arrow
  • Alignment
  • Markup
  • Comments
• Courses
• Get In Touch

Сейчас не будем подробно останавливаться на каждом стиле для этого меню, вместо этого сосредоточимся на нескольких важных моментах. Прежде всего, это div и класс.menu-wrap. Посмотрите на его стили:

Menu-wrap { background-color: #6968AB; position: fixed; top: 0; height: 100%; width: 280px; margin-left: -280px; font-size: 1em; font-weight: 700; overflow: auto; transition: .25s; z-index: 10; }

Положение фиксированное, поэтому при прокрутке страницы меню всегда остается в одном положении. Высота 100% позволяет меню занимать все вертикальное пространство на странице. Обратите внимание, что в поле margin-left установлено отрицательное число, равное ширине меню. Это значит, что меню будет исчезать из окна просмотра. Чтобы сделать его снова видимым, мы создаем другой класс toggler с jQuery. Наш файл JavaScript будет выглядеть так:

$(document).ready(function() { var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("click", function() { $(this).toggleClass("button-open"); $menuWrap.toggleClass("menu-show"); } ); } );

Добавляем другую переменную $menuWrap, которая содержит оболочку меню. Используйте тот же обработчик событий, который мы создали ранее. Только на этот раз переключаем два класса: один для кнопки и один для оболочки меню. Значение левого поля класса.menu-show равно 0, это добавит эффект тени.

Menu-show { margin-left: 0; box-shadow: 4px 2px 15px 1px #B9ADAD; }

Вы можете заметить, что в одном из элементов списка есть класс.menu-item-has-children, который содержит подменю. Кроме того, сразу под ссылкой размещен тег span с классом.sidebar-menu-arrow.

span имеет::after pseudo-element и содержит стрелку FontAwesome. По умолчанию подменю скрыто и будет видно только при нажатии на стрелку. Вот как мы это можем сделать с jQuery:

$(document).ready(function() { var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() { $(this).next().slideToggle(300); } ); } );

Когда мы нажимаем на стрелку, мы вызываем функцию, которая в свою очередь нацелена на следующий элемент сразу после span (в нашем случае это подменю) и делает его видимым. Функцию, которую мы используем - slideToggle . Она заставляет элемент появляться и исчезать. Функция в нашем примере имеет один параметр - длительность анимации.

Элементы меню в примере имеют hover-эффект. Он создается с использованием::after pseudo-element. Код выглядит так:

Menu-sidebar li > a::after { content: ""; display: block; height: 0.15em; position: absolute; top: 100%; width: 102%; left: 50%; transform: translate(-50%); background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); transition: background-position .2s .1s ease-out; background-size: 200% auto; } .menu-sidebar li > a:hover::after { background-position: -100% 0; }

::after pseudo-element содержит элемент block level внизу каждой ссылки с полной шириной и высотой 0.15em. Выглядит все это как подчеркивание. Особенность заключается в том, что мы не просто применяем цвет фона к линии, мы используем функцию linear-gradient() на фоновом изображении. Хотя эта функция предназначена для создания цветовых градиентов, мы можем менять цвет, указав нужные проценты.

Menu-sidebar li > a::after { background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); }

Половина лини здесь прозрачная, а вторая половина - желтая. Сделав размер фона 200%, мы удваиваем ширину нашего блока. Теперь прозрачная часть занимает всю ширину ссылки, а желтая часть перемещается влево и становится незаметной. Мы меняем положение фона при наведении на -100%. Теперь желтая часть становится видимой, а прозрачная - скрыта.

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

Каждый из рассмотренных нами элементов работает как единое целое. Вы можете создать такое меню, используя любой дизайн сайта из коллекции TemplateMonster. Как видите, сделать это проще, чем можно себе представить. Удачи в создании профессиональных и удобных для пользователей сайтов!

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

С помощью возможностей JQuery мы можем превратить меню навигации в динамическое меню. Хотя сейчас для создания динамической навигации можно использовать только CSS3 , JQuery делает меню еще более функциональным.

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

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

Сегодня я представляю вам 30 отличных примеров JQuery меню навигации.

Pushy адаптивное, не привязанное к холсту меню навигации, использующее преобразования и переходы CSS . Оно отлично работает на мобильных устройствах. Обязательно посмотрите демо, и оно определенно вам понравится.

Демо | Скачать

Это еще одно отличное JQuery -меню для создания красивых прокручиваемых списков навигации. Его отличительной чертой является малый размер исходных файлов.

Демо | Скачать

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

Демо | Скачать

Slidebars — JQuery фреймворк для быстрой и простой реализации стилей приложения без привязки к холсту. Slidebars также обрабатывает изменения ориентации и изменение размеров.

Демо | Скачать

JQuery меню, которое выводит квадратное анимированное меню сайта с помощью JQuery и CSS3 . Убедитесь в этом, посмотрев демо.

Демо | Скачать

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

Демо | Скачать

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

Демо | Скачать

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

Демо | Скачать

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

Демо | Скачать

slimMenu — это небольшой jQuery плагин, который поможет вам в разработке адаптивных, многоуровневых меню навигации. Что самое классное в нем, так это то, что вы можете иметь несколько разных меню, и все они будут абсолютно адаптивны.

Демо | Скачать

jQuery меню навигации, позволяющее задать горизонтальное меню по всей ширине контейнера. С помощью этого плагина это делается очень просто. Кроме того можно реализовать поддержку для IE7 .

Демо | Скачать

Это mobile-first пример использования медиа запросов и JavaScript для создания отличного многоуровневого меню с поддержкой сенсорных экранов, эффектов наведения и навигации с помощью клавиатуры.

Демо | Скачать

jQuery меню, которое запускает события при наведении курсора мыши на выпадающий элемент меню. Идеально подходит для создания адаптивных выпадающих меню, как на Amazon .

Демо | Скачать

Плагин jQuery меню, который предлагает простой и интуитивный способ вывода меню. Создает адаптивные списки меню. Работает на всех устройствах!

Демо | Скачать

Shifter — простой в использовании mobile-first jQuery плагин для создания слайд-меню, выезжающих с правой стороны при нажатии на кнопку переключения. Для настройки существует только одна опция maxWidth . Она позволяет настроить разрешение/ориентацию для мобильных устройств.

Демо | Скачать

Hamburger — это jQuery плагин для создания слайд-меню в стиле Android App , в котором по правому краю экрана размещается всплывающее меню. При раскрытии меню в полном размере, оно перекрывает область контента, но не панель действий.

Демо | Скачать

Focucss — jQuery меню навигации, с помощью которого создается не привязанное к холсту меню в сайдбаре с крутыми функциями размытости, с помощью которых вы можете обратить внимание пользователей на основные разделы сайта и сделать менее заметными не слишком полезные разделы.

Демо | Скачать

Drawer — jQuery плагин для создания адаптивного, анимированного меню, выезжающего при нажатии из боковой области экрана. Подобные функции вы могли видеть в Android -приложениях.

Демо | Скачать

Datmenu — премиум jQuery адаптивное меню с различными функциями CSS3 анимации. Что самое замечательное в этом плагине, так это возможность полной настройки с помощью js -опций.

Демо | Скачать

jPanelMenu — красивое и современное jQuery меню, позволяющее создавать панельное меню навигации с функциями переходов CSS3 анимации. Стиль jPanelMenu напоминает мобильные версии Facebook и Google . Плагин может использоваться для разнообразных мобильных приложений.

Демо | Скачать

Fly Side Menu — крутой плагин меню навигации, который использует CSS3 для создания бокового меню с 3D преобразованиями и переходами.

Демо | Скачать

PageScroll — настраиваемое мобильное jQuery -меню, рекомендованное для использования на любых веб-сайтах, а также целевых страницах.

Демо | Скачать

DD Icon Menu — это jQuery плагин, который позволяет создавать вертикальное меню иконок, расположенное на краю экрана с разворачивающимися при наведении подпунктами меню.

Демо | Скачать

jQuery меню, позволяющее осуществлять навигацию по датам в выбранном диапазоне (неделя, месяц или год ). Идеально для запросов информации с помощью вызовов AJAX .

Демо | Скачать

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

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

Но в данном уроке мы построим простое выпадающее меню с использованием jQuery. Оно будет работать с помощью метода анимации для генерирования задержанных эффектов. Вместе с кодом JavaScript также применяются эффекты переходов CSS3. В результате получается заготовка для навигации сайта.

Сначала построим основной шаблон HTML5. Потребуется последняя версия jQuery , которую мы получаем из API Google. Также добавляем файл стилей styles.css , который будет представлен ниже:

Горизонтальная навигационная панель | Материалы сайта сайт

Теперь рассмотрим структуру, которая построена на основе неупорядоченного списка в верху страницы. Весь список помещается в элемент HTML5 для лучших результатов SEO.

• Главная
• О нас
  • Миссия
  • Команда
  • История
• Продукты
  • Логитипы
  • Шаблоны
  • Иконки
  • Плагины jQuery
  • маркетинг Internet
• Интернационализация
  • Китай
  • Япония
  • Канада
  • Автсралия
  • Южная Америка
• Контакт

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

Таблица стилей содержит код сброса значений свойств по умолчанию. Многие разработчики включают файл от Eric Meye , но для нашего случая он слишком громоздкий. К тому же код хранится на другом сервере, что само по себе является плохим решением в данном случае.

Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 101%; } body { background: #eaeaea url("images/bg.png"); font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; padding-bottom: 60px; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } strong { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; }

В коде есть интересное свойство -webkit-font-smoothing . Оно предназначено для сглаживания шрифтов при работе кода в браузерах под управлением Mac OS X или iOS.

Теперь перейдем к нашему меню.

#ddmenu { display: block; width: 100%; height: 80px; margin: 0 auto; padding: 0 15px; background: #fff; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2); cursor: pointer; outline: none; font-weight: bold; color: #8aa8bd; } #ddmenu li { display: block; position: relative; float: left; font-size: 1.45em; text-shadow: 1px 1px 0 #fff; border-right: 1px solid #dae0e5; } #ddmenu li a { display: block; float: left; padding: 0 12px; line-height: 78px; font-weight: bold; text-decoration: none; color: #6c87c0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } #ddmenu li:hover > a { color: #7180a0; background: #d9e2ee; } #ddmenu ul { position: absolute; top: 88px; width: 130px; background: #fff; display: none; margin: 0; padding: 7px 0; list-style: none; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }

Добавляем селектор #ddmenu ul для выделения всех внутренних элементов в каждом пункте списка, так как важно определить дистанцию для них с помощью абсолютного позиционирования. Также добавляем линейный переход для всех ссылок, который проявляется при наведении курсора на них.

Теперь рассмотрим создание верхнего указателя элемента. Он формируется с помощью свойства вращения и универсальной рамочки с темным фоном для тени. С помощью позиционирования со смещением один элемент нашей структуры позиционируется над другим и формирует визуальное представление указателя на выпадающем меню.

#ddmenu ul:after { content: ""; width: 0; height: 0; position: absolute; bottom: 100%; left: 8px; border-width: 0 8px 8px 8px; border-style: solid; border-color: #fff transparent; } #ddmenu ul:before { content: ""; width: 0; height: 0; position: absolute; bottom: 100%; left: 4px; border-width: 0 10px 10px 10px; border-style: solid; border-color: rgba(0, 0, 0, 0.1) transparent; } #ddmenu ul li { display: block; width: 100%; font-size: 0.9em; text-shadow: 1px 1px 0 #fff; } #ddmenu ul li a { display: block; width: 100%; padding: 6px 7px; line-height: 1.4em; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } #ddmenu ul li a:hover { background: #e9edf3; }

$(document).ready(function(){ $("a").on("click", function(e){ e.preventDefault(); }); $("#ddmenu li").hover(function () { clearTimeout($.data(this,"timer")); $("ul",this).stop(true,true).slideDown(200); }, function () { $.data(this,"timer", setTimeout($.proxy(function() { $("ul",this).stop(true,true).slideUp(200); }, this), 100)); }); });

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

Вторая часть кода совершает все магические действия. Мы присоединяем обработчик события для процесса наведения курсора мыши на пункт списка. Обработчик будет останавливать текущую активную анимацию и выводить новый подпункт с помощью .slideDown() . Также устанавливаем небольшую задержку, чтобы реагировать только на действительный выбор пункта.