SLIDE OUT SIDEBAR МЕНЮ


SLIDE OUT SIDEBAR МЕНЮ

Плавно выдвигающееся меню боковой панели. Реализации данного меню уже несколько лет, однако мы решили вспомнить о нём и прикрутить иконки font-awesome, шрифт roboto и обновить modernizr.

SLIDE OUT SIDEBAR МЕНЮ

SLIDE OUT SIDEBAR МЕНЮ

 

Возьмите на заметку:

Одни из лучших seo-kursy в Киеве

HTML

Меню состоит из двух основных частей:

верхняя часть, которая располагается в шапке страницы, и содержит заголовок меню с иконкой «гамбургера»;

sidebar меню, то которое будет отображаться при наведении на иконку «гамбургера».

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

Sidebar меню состоит из неупорядоченного списка с классом .gn-menu, и возможностью добавленияsubmenu.

В отличие от оригинальной статьи, мы подключили популярные бесплатные иконочные шрифты font-awesome.

Для этого нужно просто подключить необходимый файл стилей:

Однако можно предварительно скачать и шрифты и стили этого шрифта к себе и подгружать их со своего сервера.

CSS

JS

Для работы меню не требуется библиотеки jQuery.

Нужно подключить файлы:

 

Previous Модуль для Opencart и Ocstore - сборник
Next Модальные окна с размытым фоном на CSS3

Suggested Posts

Обработка форм с помощью PHP | Видео

Самые классные JQuery плагины за последние месяца

Модуль CSV Price Pro import/export v 4.1.7

Создаем портфолио с помощью WordPress плагина Projects от WooThemes

Плагин Jrating

Адаптивный шаблон Opencart 2.1.0.1-2.1.0.2 — Magazin