Боковое слайд меню. Фиксированное боковое меню на чистом CSS

Хабр, привет!

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

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest , это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

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

В этом обзоре мы рассмотрим многоуровневые меню.

Flat Horizontal Navigation

Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header w/ Aligned Dropdowns

Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Smooth Accordion Dropdown Menu

Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ

Pure CSS Dark Inline Navigation Menu

Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Pure CSS3 Mega Dropdown Menu With Animation

Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs

CSS3 Dropdown Menu

Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg

Simple Pure CSS Dropdown Menu

Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW

Bootstrap 3 mega-dropdown menu

Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Flat Navigation

Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN

3D nested navigation

Горизонтальное меню с очень крутой анимацией без js!
http://codepen.io/devilishalchemist/pen/wBGVor

Responsive Mega Menu - Navigation

Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного "хромает". Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc

Pure Css3 Menu

Оригинальное меню. С простым и чистым кодом без js. Применяйте для "вау" эффектов.
http://codepen.io/Sonick/pen/xJagi

Full CSS3 Dropdown Menu

Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi

Css3 only dropdown menu

Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb

Dropdown Menus

Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa

Pure CSS DropDown Menu

Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH

Pull Menu - Menu Interaction Concept

Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Make Simple Dropdown Menu

Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb

Pure CSS dropdown

Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR

Dropdown Menu

Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 Dropdown Menu

Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR

Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ

CSS3 Menu Dropdowns (особенное решение)!

Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz

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

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

Поэтому не забывайте подписываться на нас , чтобы быть в курсе всех событий, а мы в свою очередь не забудем вас радовать новыми и полезными материалами!) Ну так ладно, что то я увлекся и ушел от темы) Давайте остановимся на нашем меню и я постараюсь рассказать о нем более подробнее.

HTML. Что нам потребуется подключить и какой будет каркас страницы...

Для начала подключаем, как обычно файл стилей demo.css , файл стилей font-awesome.min.css для наших иконок, скачать можете с официального сайта http://fontawesome.io/ , далее нам потребуется подключить библиотеку jQuery и не забываем про сам скрипт menu.js

Теперь формируем наш каркас HTML разметки для меню. Для этого создаем тег nav и прописываем ему идентификатор menu , который будет добавлять и удалять класс menu-open с помощью метода toggleClass .

Вся эта конструкция будет работать исключительно при клике на кнопку с идентификатором menuToggle .

Главная Услуги Портфолио Отзывы Контакты

Теперь давайте оформим, немного нашу страницу в нашем авторском стиле от команды проекта

сайт

любительский блог веб-программирования

JQUERY. Немного кода и ничего лишнего...

Создаем функцию по клику и прописываем ей идентификатор menuToggle . Далее обращаемся к идентификатору menu и добавляем, удаляем класс menu-open .

$(function(){ $("#menuToggle").on("click", function(){ $("#menu").toggleClass("menu-open"); }); })(jQuery);

CSS. Базовые свойства и варианты изменения расположения меню...

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

#menu { position: fixed; right: -190px; width: 250px; height: 100%; top: 0; } #menu.menu-open { right: 0; }

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

#menuContent { position: absolute; left: 60px; background: #2b271a; width: 200px; height: 100%; padding-top: 114px; } #menu a { margin-left: 40px; color: #00ffff; display: block; font-size: 20px; line-height: 40px; text-decoration:none; } #menu a:hover { color: #00ff40; } #menu{ -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }

И напоследок, нам остается только оформить кнопку и задать ей нужные свойства, решающими из которых являются: позиционирование, расположение, ширина и высота. Для красоты накладываем анимацию с помощью transition .

#menuToggle { position: absolute; top: 120px; text-align: center; font-size: 14px; color: #ffffff; width: 40px; height: 40px; line-height: 40px; cursor: pointer; background: rgba(0,0,0,0.45); -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } #menuToggle:hover { color: #00ff40; background: rgba(0,0,0,0.2); -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }

Теперь нам осталось, только дописать оформление к нашей страницы, чтобы оно красиво смотрелось)

Body{ background:#757575; } .rh img{ margin: 0 auto; display:block; } .rh span{ color:#fff; display:block; text-align:center; font-size:41px; } .rh span>p{ color:#f1f3e9; font-size:15px; } hr{ border:0.4px solid #fff; background:#fff; color:#fff; width:30%; margin:12px auto; } .rh ul{ list-style:none; margin:5px auto; width:54%; } .rh ul li{ float:left; margin:20px; } .rh ul li a{ text-decoration:none; } .rh ul li a span{ padding:13px; } .rh ul li a span:hover{ background:#c7c9bd; padding:8px; border: 1px dashed #fff; }

P.S. Делаем расположение меню слева...

Для этого нам надо просто дописать и изменить свойства для #menu , #menu.menu-open и #menuToggle .

#menu { left: -262px; } #menu.menu-open { left: -60px; } #menuToggle { margin-left: 275px; }

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

Существует масса готовых решений для создания таких панелей с помощью 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. С ними не должно возникнуть никаких сложностей. Просто добавьте свой уникальный контент и готово — можно запускать бизнес и привлекать все новых и новых читателей. Также очень важно помнить о том, что текст для каждого шаблона был написан вручную.

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

Итак, коротко и ясно… Ниже способ реализации простого выезжающего меню. Код сразу с комментами, что бы было понятно. Тут DEMO . Смысл в том, что нажимаем на значок ☰, и слева выезжает менюшка. Значек бургера превращается в крестик, как в Телеграме 🙂 Затем нажимаем на крестик и менюшка заезжает влево. Всё очень простенько… При желании код и стили легко модернизировать, изменить цвета и размеры. Так же если хотите переместить меню в правую часть, то в стилях просто все left замените на right. Опять же в DEMO песочнице можно экспериментировать. Преимущество такого меню в том, что его можно внедрить в большинство шаблонов.

Вот сама вёрстка :

ПРОСТОЕ ВЫЕЗЖАЮЩЕЕ БОКОВОЕ МЕНЮ

Далее CSS стили:

/* стили для боди, тут всё понятно */
body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 12pt;
background: #f0f0f0;
}
/*стилизуем менюшку*/
.hidden-menu {
display: block;
position: fixed;
list-style:none;
padding: 10px;
margin: 0;
box-sizing: border-box;
width: 200px;
background-color: #2b343c;
height: 100%;
top: 0;
left: -200px;
transition: left .2s;
z-index: 2;

}
.hidden-menu li a {text-decoration: none; color:#cacaca;}
.hidden-menu li a:hover {color:#fff;}
/*скрываем инпут чекбокс*/
.hidden-menu-ticker {
display: none;
}
/*общие стили значка-гамбургера, самого лэйбла*/
.btn-menu {
color: #fff;
background-color: #fff;
padding: 2px;
position: fixed;
top: 5px;
left: 5px;
cursor: pointer;
transition: left .23s;
z-index: 3;
width: 20px;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
/*общие стили полосок*/
.btn-menu span {
display: block;
height: 2px;
background-color: #2b343c;
margin: 5px 0 0;
transition: all .1s linear .23s;
position: relative;
}
/*прибиваем к верху лэйбла первую полоску*/
.btn-menu span.first {
margin-top: 0;
}
/*при нажатии на бургер двигаем его и делаем другой фон бургеру*/
.hidden-menu-ticker:checked ~ .btn-menu {
left: 160px;
background-color: #2b343c;
}
/*и дальше стили меняющие бургер, двигающие менюшку по событию - нажатие на значек бургера*/
.hidden-menu-ticker:checked ~ .hidden-menu {
left: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu span.first {
-webkit-transform: rotate(45deg);
top: 7px;
background-color: #fff;
}
.hidden-menu-ticker:checked ~ .btn-menu span.second {
opacity: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu span.third {
-webkit-transform: rotate(-45deg);
top: -7px;
background-color: #fff;
}
/*ну а тут такое, стиль заголовка, шоб симпотичнее было:)*/
header {
background-color: #fff;
color: #2487ca;
text-align: center;
padding: 5px;
}
h1 {
margin: 0;
padding: 0;
font-size: 17px;
font-weight: normal;
}

Если есть вопросы, задавайте в комментах. Делитесь статьёй в соц. сетях. Спасибо 😉

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

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

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

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