С помощью 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: +/- при закрытом/ открытом меню, но вы можете добавить изображение или любую другую конструкцию. Посмотреть пример того, что у нас получилось, можно здесь
Как всегда, готов выслушать вопросы и попробовать ответить на них. Всего доброго, всех благ.
Так же кому интересно, можете посмотреть на предыдущий способ с помощью CSS, который описан в статье -
Теперь к делу. Как и в прошлой статье, первым делом, давайте напишем HTML код нашего меню. Код такойже как и в той статье, чтобы не было путаницы и было более понятным. Меню с двумя пунктами и оба имеют подменю.
-
пункт 1
- Выпадающий пункт 1
- Выпадающий пункт 2
- Выпадающий пункт 3
-
пункт 2
- Выпадающий пункт 1
- Выпадающий пункт 2
- Выпадающий пункт 3
Если у Вас есть такая строка или схожая, которая уже ранее подключила библиотеку, то вновь делать этого не стоит.
jQuery(document).ready(function($){ $("#slow_nav ul li").hover(function () { $("ul", this).stop().slideDown(400); }, function () { $("ul", this).stop().slideUp(400); }); });
Во второй строке скрипта указываем айди нашего меню. Если Вы применяете данный способ к своему собственному меню, то естественно меняйте имя на свое. В данном случаи это - #slow_nav .
Еще можете настроить время анимации. В данном скрипте на открывание и закрывание стоит значение 400 миллисекунд, это 0,4 секунды. Если хотите можете сменить на большее значение или на меньшее.
Последний шаг, добавление стилей. Они очень схожи со стилями из прошлой статьи, только в них отсутствуют свойства CSS анимации.
#slow_nav > ul{ width: 500px; margin:25px auto 0; } #slow_nav > ul > li{ list-style: none; display: inline-block; position:relative; padding:0; } #slow_nav a{text-decoration:none;} #slow_nav > ul > li > a{ font-size:18px; padding:5px; background-color:#333; color:#fff; } #slow_nav li ul{ position:absolute; list-style:none; text-align:center; top:15px; font-size:15px; left:0; margin:0; padding:0; display:none; } #slow_nav li ul li{ background-color:#333; border-bottom:1px solid #888; } #slow_nav li ul li:last-child{ border-bottom:none; } #slow_nav li ul li a{ padding:5px 12px; color:#fff; display:block; } #slow_nav li ul li:hover{ background-color:#444; } #slow_nav li ul li:first-child{ margin-top:25px; position:relative; } #slow_nav li ul li:first-child:before{ content:""; position:absolute; width:1px; height:1px; border:5px solid transparent; border-bottom-color:#333; left:10px; top:-10px; }
Также к стилям добавлена одна новая строка, с помощью которой скрипт правильно работает. Для элемента - #slow_nav li ul задано свойство display:none; . Если его не добавить, то выпадающее меню будет изначально видно и исчезнет лишь после проведения по нему курсором. Все остальные же стили как предыдущей статье.
Как и прошлый способ, так и этот можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress . Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂
На этом все, спасибо за внимание. 🙂
В этом уроке мы покажем вам, как создавать боковое выпадающее меню для еще более простой навигации по сайту. Такое меню - популярная тенденция в современном веб-дизайне. На многих сайтах используется этот тип меню. С его помощью можно избавиться от хаоса на страницах проекта, сделать его более читаемым, сосредотачивая внимание пользователей на основном контенте.
Это прекрасный способ добиться минимализма без отвлекающих факторов. Сегодня создадим такое меню самостоятельно.
Чтобы создать меню навигации, давайте сначала ознакомимся с настройками:
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 градусов, а средняя полоса сдвигалась вправо и исчезала. Вот какую анимацию можно настроить:
Выпадающее меню навигацииТеперь, когда у вас есть иконка-гамбургер, давайте сделаем ее полезной и создадим выпадающее меню при нажатии на нее. Вот как выглядит разметка меню:
Сейчас не будем подробно останавливаться на каждом стиле для этого меню, вместо этого сосредоточимся на нескольких важных моментах. Прежде всего, это 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. Оно будет работать с помощью метода анимации для генерирования задержанных эффектов. Вместе с кодом JavaScript также применяются эффекты переходов CSS3. В результате получается заготовка для навигации сайта.
HTMLСначала построим основной шаблон HTML5. Потребуется последняя версия jQuery , которую мы получаем из API Google. Также добавляем файл стилей styles.css , который будет представлен ниже:
Горизонтальная навигационная панель | Материалы сайта сайт
Теперь рассмотрим структуру, которая построена на основе неупорядоченного списка в верху страницы. Весь список помещается в элемент HTML5 для лучших результатов SEO.
Структура кода достаточно простая. Каждый пункт списка включает эффект выделения, когда курсор мыши находится в нем. Все внутренние элементы 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; }
JavaScript$(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() . Также устанавливаем небольшую задержку, чтобы реагировать только на действительный выбор пункта.
