Большой обзор красивых многоуровневых меню с codepen. Выезжающее меню на CSS Как сделать выдвижное меню

Существует масса готовых решений для создания таких панелей с помощью jQuery, отдельные плагины и модули для различных систем управления сайтом.
Это всё очень даже хорошо, но можно ли, для реализации боковых слайд-панелей обойтись исключительно средствами CSS? Конечно можно! Но осторожно))), с оглядкой на то, что не все браузеры одинаково хорошо поддерживают современные свойства CSS3.

Не так давно, «выдал на-гора» решение и пример работы . Один из первых комментариев был таким: «давайте её в бок переместим...». Почему-бы и нет? Давайте)).

Сегодня расскажу и покажу на примере, как с помощью «магии CSS» можно забабахать, вполне себе функциональное, меню, по клику.
Для начала, по заведённой традиции, смотрим живой пример работы панели, далее, вместе с теми кому оно надо, рассмотрим весь расклад, что, как и зачем. Предвидя вопросы, приготовил варианты расположения меню, как слева, так и справа:

HTML-Разметка

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

Располагаем чекбокс в верхней части документа, лучше сразу после тега . Прописываем атрибут hidden , напрямую указывая состояние «скрытый» у данного элемента, а так же присвоим уникальный идентификатор, id="nav-toggle" например, для связки с атрибутом for тега , который мы оформим и будем использовать в виде кнопки переключения панели.

В качестве обёртки содержимого боковой панели использовал тег с определённым классом class="nav" , так как Internet Explorer до версии 8.0 включительно игнорирует этот тег, вы можете использовать привычный .
Внутри базового контейнера размещаем нужное нам содержимое.
В первую очередь пропишем метку (тег ) сформированную в css в виде той самой «кнопки-гамбургер», с помощью которой установим связь с скрытым флажком checkbox . Для этого обязательно, имя атрибута for должно соответствовать id чекбокса. Пустой атрибут onclick используем для в iOS

сайт

< ul> < li>< a href= "#1" > Один < li>< a href= "#2" > Два < li>< a href= "#3" > Три < li>< a href= "#4" > Четыре < li>< a href= "#5" > Пять < li>< a href= "#6" > Шесть < li>< a href= "#7" > Семь

Один
Два
Три
Четыре
Пять
Шесть
Семь

На этом разметка нашего бокового меню заканчивается. Правда есть ещё одна совсем необязательная фишка, это фон затемнения основного контента при включенной панели. Если оно вам надо, просто
пропишите ниже меню, или в любом другом месте тела страницы, дополнительный div-контейнер с определённым классом:

< div class = "mask-content" >

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

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

CSS

Расписывать каждое правило и свойство не буду, так как сделал это непосредственно в самом коде css.
Стили для панелей расположенных слева или справа практически одинаковы, отличаются лишь парой-тройкой значений. В архиве с исходниками упакованы оба варианта отдельными файлами, так что выбирайте нужный, правильно подключайте к документу и всё.
Здесь выкладываю «фарш css», для меню выдвигающегося с левого края страницы:

/** * Переключаемая боковая панель навигации * выдвигающаяся по клику слева */ . nav { /* ширна произвольная, не стесняйтесь экспериментировать */ width: 320px; min- width: 320px; /* фиксируем и выставляем высоту панели на максимум */ height: 100 %; position: fixed; top: 0 ; bottom: 0 ; margin: 0 ; /* сдвигаем (прячем) панель относительно левого края страницы */ left: - 320px; /* внутренние отступы */ padding: 15px 20px; /* плавный переход смещения панели */ - webkit- transition: left 0. 3s; - moz- transition: left 0. 3s; transition: left 0. 3s; /* определяем цвет фона панели */ background: #16a085; /* поверх других элементов */ z- index: 2000 ; } /** * Кнопка переключения панели * тег */ . nav- toggle { /* абсолютно позиционируем */ position: absolute; /* относительно левого края панели */ left: 320px; /* отступ от верхнего края панели */ top: 1em; /* внутренние отступы */ padding: 0. 5em; /* определяем цвет фона переключателя * чаще вчего в соответствии с цветом фона панели */ background: inherit; /* цвет текста */ color: #dadada; /* вид курсора */ cursor: pointer; /* размер шрифта */ font- size: 1. 2em; line- height: 1 ; /* всегда поверх других элементов страницы */ z- index: 2001 ; /* анимируем цвет текста при наведении */ - webkit- transition: color . 25s ease- in- out; - moz- transition: color . 25s ease- in- out; transition: color . 25s ease- in- out; } /* определяем текст кнопки * символ Unicode (TRIGRAM FOR HEAVEN) */ . nav- toggle: after { content: "\2630" ; text- decoration: none; } /* цвет текста при наведении */ . nav- toggle: hover { color: #f4f4f4; } /** * Скрытый чекбокс (флажок) * невидим и недоступен:) * имя селектора атрибут флажка */ [ id= "nav-toggle" ] { position: absolute; display: none; } /** * изменение положения переключателя * при просмотре на мобильных устройствах * когда навигация раскрыта, распологаем внутри панели */ [ id= "nav-toggle" ] : checked ~ . nav > . nav- toggle { left: auto; right: 2px; top: 1em; } /** * Когда флажок установлен, открывается панель * используем псевдокласс:checked */ [ id= "nav-toggle" ] : checked ~ . nav { left: 0 ; box- shadow: 4px 0px 20px 0px rgba(0 , 0 , 0 , 0.5 ) ; - moz- box- shadow: 4px 0px 20px 0px rgba(0 , 0 , 0 , 0.5 ) ; - webkit- box- shadow: 4px 0px 20px 0px rgba(0 , 0 , 0 , 0.5 ) ; overflow- y: auto; } /* * смещение контента страницы * на размер ширины панели, * фишка необязательная, на любителя */ [ id= "nav-toggle" ] : checked ~ main > article { - webkit- transform: translateX(320px) ; - moz- transform: translateX(320px) ; transform: translateX(320px) ; } /* * изменение символа переключателя, * привычный крестик (MULTIPLICATION X), * вы можете испльзовать любой другой значок */ [ id= "nav-toggle" ] : checked ~ . nav > . nav- toggle: after { content: "\2715" ; } /** * профиксим баг в Android ul { display: block; margin: 0 ; padding: 0 ; list- style: none; } . nav > ul > li { line- height: 2.5 ; opacity: 0 ; - webkit- transform: translateX(- 50 % ) ; - moz- transform: translateX(- 50 % ) ; - ms- transform: translateX(- 50 % ) ; transform: translateX(- 50 % ) ; - webkit- transition: opacity . 5s . 1s, - webkit- transform . 5s . 1s; - moz- transition: opacity . 5s . 1s, - moz- transform . 5s . 1s; - ms- transition: opacity . 5s . 1s, - ms- transform . 5s . 1s; transition: opacity . 5s . 1s, transform . 5s . 1s; } [ id= "nav-toggle" ] : checked ~ . nav > ul > li { opacity: 1 ; - webkit- transform: translateX(0 ) ; - moz- transform: translateX(0 ) ; - ms- transform: translateX(0 ) ; transform: translateX(0 ) ; } /* определяем интервалы появления пунктов меню */ . nav > ul > li: nth- child(2 ) { - webkit- transition: opacity . 5s . 2s, - webkit- transform . 5s . 2s; transition: opacity . 5s . 2s, transform . 5s . 2s; } . nav > ul > li: nth- child(3 ) { - webkit- transition: opacity . 5s . 3s, - webkit- transform . 5s . 3s; transition: opacity . 5s . 3s, transform . 5s . 3s; } . nav > ul > li: nth- child(4 ) { - webkit- transition: opacity . 5s . 4s, - webkit- transform . 5s . 4s; transition: opacity . 5s . 4s, transform . 5s . 4s; } . nav > ul > li: nth- child(5 ) { - webkit- transition: opacity . 5s . 5s, - webkit- transform . 5s . 5s; transition: opacity . 5s . 5s, transform . 5s . 5s; } . nav > ul > li: nth- child(6 ) { - webkit- transition: opacity . 5s . 6s, - webkit- transform . 5s . 6s; transition: opacity . 5s . 6s, transform . 5s . 6s; } . nav > ul > li: nth- child(7 ) { - webkit- transition: opacity . 5s . 7s, - webkit- transform . 5s . 7s; transition: opacity . 5s . 7s, transform . 5s . 7s; } /** * оформление ссылок пунктов меню */ . nav > ul > li > a { display: inline- block; position: relative; padding: 0 ; font- family: "Open Sans" , sans- serif; font- weight: 300 ; font- size: 1. 2em; color: #dadada; width: 100 %; text- decoration: none; /* плавный переход */ - webkit- transition: color . 5s ease, padding . 5s ease; - moz- transition: color . 5s ease, padding . 5s ease; transition: color . 5s ease, padding . 5s ease; } /** * состояние ссылок меню при наведении */ . nav > ul > li > a: hover, . nav > ul > li > a: focus { color: white; padding- left: 15px; } /** * линия подчеркивания ссылок меню */ . nav > ul > li > a: before { content: "" ; display: block; position: absolute; right: 0 ; bottom: 0 ; height: 1px; width: 100 %; - webkit- transition: width 0s ease; transition: width 0s ease; } . nav > ul > li > a: after { content: "" ; display: block; position: absolute; left: 0 ; bottom: 0 ; height: 1px; width: 100 %; background: #3bc1a0; - webkit- transition: width . 5s ease; transition: width . 5s ease; } /** * анимируем линию подчеркивания * ссылок при наведении */ . nav > ul > li > a: hover: before { width: 0 %; background: #3bc1a0; - webkit- transition: width . 5s ease; transition: width . 5s ease; } . nav > ul > li > a: hover: after { width: 0 %; background: transparent; - webkit- transition: width 0s ease; transition: width 0s ease; } /* фон затемнения на основной контент * при этом элементы блокируютя * спорная такая фича, если оно вам надо * просто раскомментируйте */ /* .mask-content { display: block; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); visibility: hidden; opacity: 0; } :checked ~ .mask-content { visibility: visible; opacity: 1; -webkit-transition: opacity .5s, visibility .5s; transition: opacity .5s, visibility .5s; } */

/** * Переключаемая боковая панель навигации * выдвигающаяся по клику слева */ .nav { /* ширна произвольная, не стесняйтесь экспериментировать */ width: 320px; min-width: 320px; /* фиксируем и выставляем высоту панели на максимум */ height: 100%; position: fixed; top: 0; bottom: 0; margin: 0; /* сдвигаем (прячем) панель относительно левого края страницы */ left: -320px; /* внутренние отступы */ padding: 15px 20px; /* плавный переход смещения панели */ -webkit-transition: left 0.3s; -moz-transition: left 0.3s; transition: left 0.3s; /* определяем цвет фона панели */ background: #16a085; /* поверх других элементов */ z-index: 2000; } /** * Кнопка переключения панели * тег */ .nav-toggle { /* абсолютно позиционируем */ position: absolute; /* относительно левого края панели */ left: 320px; /* отступ от верхнего края панели */ top: 1em; /* внутренние отступы */ padding: 0.5em; /* определяем цвет фона переключателя * чаще вчего в соответствии с цветом фона панели */ background: inherit; /* цвет текста */ color: #dadada; /* вид курсора */ cursor: pointer; /* размер шрифта */ font-size: 1.2em; line-height: 1; /* всегда поверх других элементов страницы */ z-index: 2001; /* анимируем цвет текста при наведении */ -webkit-transition: color .25s ease-in-out; -moz-transition: color .25s ease-in-out; transition: color .25s ease-in-out; } /* определяем текст кнопки * символ Unicode (TRIGRAM FOR HEAVEN) */ .nav-toggle:after { content: "\2630"; text-decoration: none; } /* цвет текста при наведении */ .nav-toggle:hover { color: #f4f4f4; } /** * Скрытый чекбокс (флажок) * невидим и недоступен:) * имя селектора атрибут флажка */ { position: absolute; display: none; } /** * изменение положения переключателя * при просмотре на мобильных устройствах * когда навигация раскрыта, распологаем внутри панели */ :checked ~ .nav > .nav-toggle { left: auto; right: 2px; top: 1em; } /** * Когда флажок установлен, открывается панель * используем псевдокласс:checked */ :checked ~ .nav { left: 0; box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5); -moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5); -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5); overflow-y: auto; } /* * смещение контента страницы * на размер ширины панели, * фишка необязательная, на любителя */ :checked ~ main > article { -webkit-transform: translateX(320px); -moz-transform: translateX(320px); transform: translateX(320px); } /* * изменение символа переключателя, * привычный крестик (MULTIPLICATION X), * вы можете испльзовать любой другой значок */ :checked ~ .nav > .nav-toggle:after { content: "\2715"; } /** * профиксим баг в Android ul { display: block; margin: 0; padding: 0; list-style: none; } .nav > ul > li { line-height: 2.5; opacity: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s; -moz-transition: opacity .5s .1s, -moz-transform .5s .1s; -ms-transition: opacity .5s .1s, -ms-transform .5s .1s; transition: opacity .5s .1s, transform .5s .1s; } :checked ~ .nav > ul > li { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } /* определяем интервалы появления пунктов меню */ .nav > ul > li:nth-child(2) { -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s; transition: opacity .5s .2s, transform .5s .2s; } .nav > ul > li:nth-child(3) { -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s; transition: opacity .5s .3s, transform .5s .3s; } .nav > ul > li:nth-child(4) { -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s; transition: opacity .5s .4s, transform .5s .4s; } .nav > ul > li:nth-child(5) { -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s; transition: opacity .5s .5s, transform .5s .5s; } .nav > ul > li:nth-child(6) { -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s; transition: opacity .5s .6s, transform .5s .6s; } .nav > ul > li:nth-child(7) { -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s; transition: opacity .5s .7s, transform .5s .7s; } /** * оформление ссылок пунктов меню */ .nav > ul > li > a { display: inline-block; position: relative; padding: 0; font-family: "Open Sans", sans-serif; font-weight: 300; font-size: 1.2em; color: #dadada; width: 100%; text-decoration: none; /* плавный переход */ -webkit-transition: color .5s ease, padding .5s ease; -moz-transition: color .5s ease, padding .5s ease; transition: color .5s ease, padding .5s ease; } /** * состояние ссылок меню при наведении */ .nav > ul > li > a:hover, .nav > ul > li > a:focus { color: white; padding-left: 15px; } /** * линия подчеркивания ссылок меню */ .nav > ul > li > a:before { content: ""; display: block; position: absolute; right: 0; bottom: 0; height: 1px; width: 100%; -webkit-transition: width 0s ease; transition: width 0s ease; } .nav > ul > li > a:after { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: #3bc1a0; -webkit-transition: width .5s ease; transition: width .5s ease; } /** * анимируем линию подчеркивания * ссылок при наведении */ .nav > ul > li > a:hover:before { width: 0%; background: #3bc1a0; -webkit-transition: width .5s ease; transition: width .5s ease; } .nav > ul > li > a:hover:after { width: 0%; background: transparent; -webkit-transition: width 0s ease; transition: width 0s ease; } /* фон затемнения на основной контент * при этом элементы блокируютя * спорная такая фича, если оно вам надо * просто раскомментируйте */ /* .mask-content { display: block; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); visibility: hidden; opacity: 0; } :checked ~ .mask-content { visibility: visible; opacity: 1; -webkit-transition: opacity .5s, visibility .5s; transition: opacity .5s, visibility .5s; } */

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

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

Ещё раз смотрите результат, скачивайте архив с исходниками, экспериментируйте с различными параметрами и творите, творите, творите...

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

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

С Уважением, Андрей

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

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

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

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. Как видите, сделать это проще, чем можно себе представить. Удачи в создании профессиональных и удобных для пользователей сайтов!

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

ШАГ 1. Добавление меню в HTML файл

Вставьте в html файл код ниже:

МЕНЮ

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

ШАГ 2. Добавление стилей

Сейчас мы немного стилизуем наше меню и все кнопки. Вставьте в ваш css файл код ниже:

Button { background: transparent; border: transparent; outline: none; cursor: pointer; margin: 50px 90px; font-weight: bold; font-size: 24px; color: #6c7d96; transition: 0.2s; } button:hover { transition: 0.2s; opacity: 0.7; } button:active { transition: 0.2s; opacity: 0.4; } nav { background-color: #6c7d96; width: 250px; position: relative; left: -999px; transition: 0.5s ease; } nav ul li { padding: 20px 0; text-align: center; transition: 0.2s; } nav ul li:hover { cursor: pointer; background-color: #454954; transition: 0.2s; } nav ul li:active { background-color: #23252b; transition: 0.2s; } nav ul li a { color: white; text-decoration: none; font-weight: bold; font-size: 21px; }

Самая важная часть кода записана в селекторе nav . С помощью относительного позиционирования мы скрываем наше меню за пределы видимой части страницы прописывая негативное значение для left .

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

ШАГ 3. Подключение скрипта

В ваш js файл вам необходимо вставить этот код:

$(document).ready(function() { $(".openButton").click(function() { if(!$(".openButton").hasClass("openDone")) { $(".openButton").addClass("openDone"); $("nav").css("left", "0px"); } else { $(".openButton").removeClass("openDone"); $("nav").css("left", "-999px"); } }); /* Подключать тогда, когда вы изначально хотите делать меню адаптивным после определённого размера экрана Этот код решает проблему случайно исчезающего меню при изменении размера экрана браузера Здесь ставьте ширину при которой включается адаптивный дизайн вашего меню $(window).resize(function() { if ($(window).width() > 1200) { $("nav ul li").removeAttr("style"); } }); */ });

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

К слову, этот класс мы нигде не прописывали. Он выполняет роль некого переключателя. Это работает таким образом, что когда идет нажатие на кнопку «МЕНЮ «, всем кнопкам с классом openButton добавляется класс openDone. И когда пользователь снова нажимает на какую-то из кнопок меню, скрипт убирает класс openDone у этих кнопок.

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

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

Резюме

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

На данный момент с помощью jQuery можно сделать на сайте всё что угодно, нужно лишь определиться надо ли это вашему сайту. Мы все стремимся сделать сайт наиболее удобный для пользователя, чтобы ему было приятно перемещаться по сайту и это было максимально легко. Меню играет большую роль когда посетитель «гуляет» по вашему сайту. И в этом уроке мы создадим выдвигающееся меню, которое может прятаться и появляться когда это необходимо пользователю.

Также интересные выдвигающиеся меню:

Пример можно увидеть здесь:

Скачать

В этом уроке мы будем использовать jQuery плагин — «jQuery.mmenu.js». Его можно скачать по ссылке — скачать .

Как пользоваться? HTML часть

Сперва подключим необходимые библиотеки и стили:

1 2 3 4 5

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

Страница 1 Страница 2 Страница 10 Страница 11 Страница 13 Страница 14 Страница 15 Страница 12 Страница 3 Страница 4 Страница 5 Страница 6 Страница 7 Страница 8 Страница 9

Немного выше меню вставим переключатель, чтобы пользователь мог открыть/закрыть его:

С HTML структурой закончили, сейчас переходим к стилям.

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

Обращаемся к библиотеке jQuery

$(".menu-icon").on("click", function(e) {

которая найдёт выезжающее меню с классом menu и применит метод toggleClass к меню. Метод toggleClass присваивает и удаляет классы у элемента.

$(".menu").toggleClass("menu_active");

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

Section_active {
transform: translateX(25%);
}

Добавим к селектору section плавность - transition в полсекунды. Чтобы секция не перекрывала собой иконку, то зададим ей позицию - relative , секция должна быть на нижнем слое - z-index: 0 .

Section {
transition: 0.5s;
position: relative;
z-index: 0;
}

Вытащим меню поверх секции

Menu {
z-index: 1;
}

Вернемся к jQuery , который найдет элемент section , присвоим ему класс section_active .

$("section").toggleClass("section_active");
})

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

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

Menu {
left: 75%; /* вместо 0 */
transform: translateX(100%); /* вместо -100% */
}
и одно значение у секции при клике

Section_active {
transform: translateX(-25%); /* вместо 25% */

Возможно вас заинтересует