Главная > Гаджеты > Боковое меню слайдер слева в мобильном приложении. Красивое выдвигающееся меню

Боковое меню слайдер слева в мобильном приложении. Красивое выдвигающееся меню

В этом посте мы сделаем фиксированное боковое информационное меню. Для реализации иконок подключим шрифт .

Шаг 1. Подключаем шрифт с иконками, создаем пустой документ

Подробную инфу о работе со шрифтом FontAwesome и ссылку на сам проект вы можете найти в моем посте – .

Вот код странички с подключенными файлами:

Фиксированное боковое меню

Шаг 2. Добавляем HTML разметку фиксированного меню

Вот и сам код разметки нашего фиксированного меню:

Как вы заметили я применил тег – это элемент разметки html5, если вы используете html4, то можете заменить этот тег на обычный или вовсе его убрать, а идентификатор перенести к списку, вот так:

Текст вашей ссылки
Текст вашей ссылки
Текст вашей ссылки

Подменю как представляет собой такой же список как и основное меню, плюс тег , который выводит иконку “каретки слева”, выполняет функцию некого “хвостика”, более подробнее на картинке ниже 🙂

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

Код стилей я постарался прокомментировать в местах где это имеет значение. В целом все не прокомментированные моменты относятся к банальной стилизации фона, цвета и т.д.

#sidebar-menu { position: fixed; /* фиксируем наше меню */ top: 200px; /* положение меню относительно верхнего края браузера */ left: 0; /* прилипили меню к левому краю */ padding: 10px; background: #323A45; color: #FFF; border-radius: 0 8px 8px 0; } #sidebar-menu li { position: relative; cursor: pointer; } #sidebar-menu li i { /* Задаем иконкам фиксированный размер, height и line-height должны быть одинаковыми */ width: 27px; height: 27px; line-height: 27px; border-radius: 4px; background: #3CB7E7; text-align: center; } #sidebar-menu li+li {margin-top: 4px;} #sidebar-menu b { display: none; position: absolute; /* позиция относительно левого края равна ширине эл-та li */ left: 27px; top: 0; height: 27px; /* ширина равна зазору между блоком меню и подменю */ width: 16px; line-height: 27px; background: transparent; color: #323A45; /* саму иконку позиционируем вправо, чтобы визуально она смотрелась вместе с блоком подменю */ text-align: right; } #sidebar-menu li > ul { display: none; position: absolute; top: -10px; left: 42px; width: 120px; padding: 10px; background: #323A45; border-radius: 8px; } #sidebar-menu li:hover b, #sidebar-menu li:hover ul {display: block;} #sidebar-menu li a { display: block; padding: 4px 8px; border-radius: 4px; color: #FFF; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; } #sidebar-menu li a:hover { display: block; background: #3CB7E7; }

Если по стилизации у вас есть вопросы пишите в комментарии к этому посту, с удовольствием отвечу.
Вот и все! Фиксированное боковое меню готово 🙂

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

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

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

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

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

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

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

В данной статье хочу предложить вашему вниманию пример создания выезжающего меню . Данный пример выезжающего меню создан с помощью CSS и jQuery .

Меню выезжает сверху при нажатии на «кнопку» расположенную по центру в самом верху.

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

Изменить скорость с которой меню выезжает вниз или прячется вверх очень просто, для этого необходимо изменить значения нескольких строчек скрипта:

Для изменения скорости выезжания меню измените числовое значение в строчке:

SlideMenu.slideDown(300);

Для изменения скорости заезжания меню вверх измените числовое значение в строчке:

SlideMenu.slideUp(300);

Чем больше числовое значение, тем медленнее будет эффект выезжания или заезжания меню.

Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery.

Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.

Меню 1
Меню 2
Меню 3
Меню 4
Меню 5

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

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

Для справки, первые "универсальные" патроны.44-40 Winchester применялись и в рычажной винтовке Winchester Model 1873, и револьвере Colt Peacemaker 1878; Под патрон.45 Long Colt компании Navy Arms, Rossi, Marlin и Winchester выпускают для современной "ковбойской" стрельбы винтовки «Ливер экшн» со скобой Генри и подствольным магазином, этот же патрон использовался в переделках Peacemaker и Colt Single Action Army.

В данной статье хочу предложить вашему вниманию пример создания выезжающего меню. Данный пример выезжающего меню создан с помощью CSS и jQuery. Меню выезжает сверху при нажатии на "кнопку" расположенную по центру в самом верху. После того как меню выехало, вся остальная область страницы становится недоступной для выделения мышкой. Изменить скорость с которой меню выезжает вниз или прячется вверх очень просто, для этого необходимо изменить значения нескольких строчек скрипта: Для изменения скорости выезжания меню измените числовое значение в строчке: Для изменения скорости заезжания меню вверх измените числовое значение в строчке: Чем больше числовое значение, тем медленнее будет эффект выезжания или заезжания меню. Важно! Для работы с данным…

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

На С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 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.

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

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

МЕНЮ

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

Сейчас мы немного стилизуем наше меню и все кнопки. Вставьте в ваш 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 .

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

В ваш 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, скрипт бы работал некорректно, а меню, при нажатии на кнопку его открытия, просто бы открывалось и моментально закрывалось.

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

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

16.09.2024

Гаджеты

Самое интересное:

Красивое выдвигающееся меню

Черный список на айфоне – подробности и нюансы работы

Обновляем Sony Xperia Z1 Sony xperia z обновления