В этом уроке мы покажем вам, как создавать боковое выпадающее меню для еще более простой навигации по сайту. Такое меню - популярная тенденция в современном веб-дизайне. На многих сайтах используется этот тип меню. С его помощью можно избавиться от хаоса на страницах проекта, сделать его более читаемым, сосредотачивая внимание пользователей на основном контенте.
Это прекрасный способ добиться минимализма без отвлекающих факторов. Сегодня создадим такое меню самостоятельно.
Чтобы создать меню навигации, давайте сначала ознакомимся с настройками:
Animation Menu Demo
Для начала необходимо загрузить Normalize.css и настроить стили браузера по умолчанию, убедиться, что меню выглядит одинаково во всех браузерах. Для отображения стрелки перед элементами меню с подпунктами будем использовать FontAwesome . Для переключения классов в меню загружаем jQuery и перемещаем весь пользовательский jQuery код в script.js. Последняя ссылка является основной таблицей для веб-проекта.
Иконка-гамбургерИконка-гамбургер является общим атрибутом навигации по сайту. Часто она создается при помощи иконочного шрифта, такого как FontAwesome, но в этом уроке мы добавим некоторую анимацию, а потому будем создавать ее с нуля. Наша иконка-гамбургер представляет собой тег span, содержащий три div класса, отображающийся в виде горизонтальных полос.
Стили выглядят следующим образом:
Toggle-button { position: fixed; width: 44px; height: 40px; padding: 4px; transition: .25s; z-index: 15; } .toggle-button:hover { cursor: pointer; } .toggle-button .menu-bar { position: absolute; border-radius: 2px; width: 80%; transition: .5s; } .toggle-button .menu-bar-top { border: 4px solid #555; border-bottom: none; top: 0; } .toggle-button .menu-bar-middle { height: 4px; background-color: #555; margin-top: 7px; margin-bottom: 7px; top: 4px; } .toggle-button .menu-bar-bottom { border: 4px solid #555; border-top: none; top: 22px; } .button-open .menu-bar-top { transform: rotate(45deg) translate(8px, 8px); transition: .5s; } .button-open .menu-bar-middle { transform: translate(230px); transition: .1s ease-in; opacity: 0; } .button-open .menu-bar-bottom { transform: rotate(-45deg) translate(8px, -7px); transition: .5s; }
Иконка имеет фиксированное положение и не меняет его при прокрутке страницы. Также имеет z-index 15, а это значит, что она всегда будет поверх других элементов. Состоит из трех bars, каждый из которых разделяет другие стили. Поэтому мы переместим каждый bar в класс.menu-bar. Остальные стили перемещаем в отдельные классы. Магия происходит тогда, когда мы добавляем другой класс в тег span, который является открытым. Мы добавляем его с помощью jQuery следующим образом:
$(document).ready(function() { var $toggleButton = $(".toggle-button"); $toggleButton.on("click", function() { $(this).toggleClass("button-open"); } ); } );
Для тех, кто не знаком с jQuery - мы инициализируем переменную с $toggleButton, которая содержит нашу иконку. Сохраняем ее в переменной без необходимости использования JavaScript. Затем мы создаем event listener, который учитывает клики по иконке. Каждый раз, когда пользователь кликает по иконке-гамбургеру, event listener запускает функцию toggleClass() , которая переключает класс.button-open.
Когда добавлен класс.button-open, мы можем использовать его для изменения способов отображения элементов. Мы используем CSS3 translate() и rotate() функции, чтобы верхняя и нижняя полосы вращались на 45 градусов, а средняя полоса сдвигалась вправо и исчезала. Вот какую анимацию можно настроить:
Выпадающее меню навигацииТеперь, когда у вас есть иконка-гамбургер, давайте сделаем ее полезной и создадим выпадающее меню при нажатии на нее. Вот как выглядит разметка меню:
Сейчас не будем подробно останавливаться на каждом стиле для этого меню, вместо этого сосредоточимся на нескольких важных моментах. Прежде всего, это div и класс.menu-wrap. Посмотрите на его стили:
Menu-wrap { background-color: #6968AB; position: fixed; top: 0; height: 100%; width: 280px; margin-left: -280px; font-size: 1em; font-weight: 700; overflow: auto; transition: .25s; z-index: 10; }
Положение фиксированное, поэтому при прокрутке страницы меню всегда остается в одном положении. Высота 100% позволяет меню занимать все вертикальное пространство на странице. Обратите внимание, что в поле margin-left установлено отрицательное число, равное ширине меню. Это значит, что меню будет исчезать из окна просмотра. Чтобы сделать его снова видимым, мы создаем другой класс toggler с jQuery. Наш файл JavaScript будет выглядеть так:
$(document).ready(function() { var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("click", function() { $(this).toggleClass("button-open"); $menuWrap.toggleClass("menu-show"); } ); } );
Добавляем другую переменную $menuWrap, которая содержит оболочку меню. Используйте тот же обработчик событий, который мы создали ранее. Только на этот раз переключаем два класса: один для кнопки и один для оболочки меню. Значение левого поля класса.menu-show равно 0, это добавит эффект тени.
Menu-show { margin-left: 0; box-shadow: 4px 2px 15px 1px #B9ADAD; }
Подменю и ссылкиВы можете заметить, что в одном из элементов списка есть класс.menu-item-has-children, который содержит подменю. Кроме того, сразу под ссылкой размещен тег span с классом.sidebar-menu-arrow.
span имеет::after pseudo-element и содержит стрелку FontAwesome. По умолчанию подменю скрыто и будет видно только при нажатии на стрелку. Вот как мы это можем сделать с jQuery:
$(document).ready(function() { var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() { $(this).next().slideToggle(300); } ); } );
Когда мы нажимаем на стрелку, мы вызываем функцию, которая в свою очередь нацелена на следующий элемент сразу после span (в нашем случае это подменю) и делает его видимым. Функцию, которую мы используем - slideToggle . Она заставляет элемент появляться и исчезать. Функция в нашем примере имеет один параметр - длительность анимации.
Элементы меню в примере имеют hover-эффект. Он создается с использованием::after pseudo-element. Код выглядит так:
Menu-sidebar li > a::after { content: ""; display: block; height: 0.15em; position: absolute; top: 100%; width: 102%; left: 50%; transform: translate(-50%); background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); transition: background-position .2s .1s ease-out; background-size: 200% auto; } .menu-sidebar li > a:hover::after { background-position: -100% 0; }
::after pseudo-element содержит элемент block level внизу каждой ссылки с полной шириной и высотой 0.15em. Выглядит все это как подчеркивание. Особенность заключается в том, что мы не просто применяем цвет фона к линии, мы используем функцию linear-gradient() на фоновом изображении. Хотя эта функция предназначена для создания цветовых градиентов, мы можем менять цвет, указав нужные проценты.
Menu-sidebar li > a::after { background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); }
Половина лини здесь прозрачная, а вторая половина - желтая. Сделав размер фона 200%, мы удваиваем ширину нашего блока. Теперь прозрачная часть занимает всю ширину ссылки, а желтая часть перемещается влево и становится незаметной. Мы меняем положение фона при наведении на -100%. Теперь желтая часть становится видимой, а прозрачная - скрыта.
Вместо прозрачной части вы можете использовать любой другой цвет. Вы также можете поэкспериментировать с градиентами.
Каждый из рассмотренных нами элементов работает как единое целое. Вы можете создать такое меню, используя любой дизайн сайта из коллекции TemplateMonster. Как видите, сделать это проще, чем можно себе представить. Удачи в создании профессиональных и удобных для пользователей сайтов!
Существует масса готовых решений для создания таких панелей с помощью jQuery, отдельные плагины и модули для различных систем управления сайтом.
Это всё очень даже хорошо, но можно ли, для реализации боковых слайд-панелей обойтись исключительно средствами 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.
Стили для панелей расположенных слева или справа практически одинаковы, отличаются лишь парой-тройкой значений. В архиве с исходниками упакованы оба варианта отдельными файлами, так что выбирайте нужный, правильно подключайте к документу и всё.
Здесь выкладываю «фарш 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. С ними не должно возникнуть никаких сложностей. Просто добавьте свой уникальный контент и готово — можно запускать бизнес и привлекать все новых и новых читателей. Также очень важно помнить о том, что текст для каждого шаблона был написан вручную.
С Уважением, Андрей
Вертикальное меню делается на основе списка, маркированного или нумерованного. По умолчанию все элементы списка располагаются вертикально, занимая по ширине всю ширину элемента контейнера , который в свою очередь занимает всю ширину его блока-контейнера.
Элементы списка могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.
1. Вертикальное меню с заголовкомПростой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.
Категории
* {box-sizing: border-box; margin: 0;} .widget { padding: 20px 30px; background: white; font-family: "Roboto", sans-serif; } .widget-title { text-transform: uppercase; letter-spacing: 2px; color: #222; font-size: 16px; padding-left: 15px; margin-bottom: 15px; border-left: 2px solid #b99d61; } .widget-list { padding: 0; list-style: none; } .widget-list a:before { content: "\2014"; margin-right: 14px; } .widget-list a { text-decoration: none; outline: none; display: block; padding: 6px 0; letter-spacing: 1px; font-weight: 300; color: #444; transition: .3s linear; } .widget-list a:hover {color: #b99d61;} 2. Вертикальное меню в стиле «схема метро»Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.
Иконка и фоновая заливка, проявляющиеся при наведении на элемент списка, помогут разнообразить дизайн элементов вертикального меню.
Категории
.category-wrap { padding: 15px; background: white; width: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .category-wrap h3 { font-size: 16px; color: rgba(0,0,0,.6); margin: 0 0 10px; padding: 0 5px; position: relative; } .category-wrap h3:after { content: ""; width: 6px; height: 6px; background: #80C8A0; position: absolute; right: 5px; bottom: 2px; box-shadow: -8px -8px #80C8A0, 0 -8px #80C8A0, -8px 0 #80C8A0; } .category-wrap ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.3); } .category-wrap li {margin: 12px 0 0 0px;} .category-wrap a { text-decoration: none; display: block; font-size: 13px; color: rgba(0,0,0,.6); padding: 5px; position: relative; transition: .3s linear; } .category-wrap a:after { content:"\f18e"; font-family: FontAwesome; position: absolute; right: 5px; color: white; transition: .2s linear; } .category-wrap a:hover { background: #80C8A0; color: white; } 4. Вертикальное меню с иконкамиИконки в меню создают визуальный якорь, дополняя словесное описание каждой категории. Для отображения иконок нужно подключить . Вы также можете использовать любой другой иконочный шрифт или иконки-картинки.
Категории
* {box-sizing: border-box; margin: 0;} .widget { padding: 20px; border: 5px solid #f1f1f1; background: #fff; border-radius: 5px; font-family: "Roboto", sans-serif; } .widget h3 { margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: normal; color: #424949; } .widget ul { margin: 0; padding: 0; list-style: none; width: 250px; } .widget li { border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; } .widget li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .widget a { text-decoration: none; color: #616a6b; display: inline-block; } .widget li:before { font-family: FontAwesome; font-size: 20px; vertical-align:bottom; color: #dd3333; margin-right: 14px; } .widget li:nth-child(1):before {content:"\f1fc";} .widget li:nth-child(2):before {content:"\f0d0";} .widget li:nth-child(3):before {content:"\f0cd";} .widget li:nth-child(4):before {content:"\f028";} .widget li:nth-child(5):before {content:"\f03d";} 5. Вертикальное меню с картинкамиДанный пример можно использовать для оформления блоков с новинками, похожими товарами, и т.п. сайте интернет-магазина.
Jpeg">
Продукт 1
₽ 2000
Продукт 2
₽ 2500
Продукт 3
₽ 2070
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600");
.col {
width: 300px;
background: white;
padding: 20px;
border: 1px solid #eeeeee;
font-family: "Open Sans", sans-serif;
}
.col * {margin: 0;}
.widget-title {
margin: 0 0 30px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 20px;
color: #242424;
overflow: hidden;
}
.widget-title:after {
content: "";
position: relative;
display: inline-block;
width: 100%;
vertical-align: middle;
right: -15px;
margin-right: -100%;
border-top: 2px solid #cca86d;
}
.price-line {margin-bottom: 20px;}
.price-line:last-child {margin-bottom: 0;}
.price-line:after {
content: "";
display: table;
clear: both;
}
.product-image {
width: 80px;
float: left;
}
.product-image a {
display: block;
outline: none;
}
.product-image img {
display: block;
width: 100%;
}
.product-content {
float: left;
margin-left: 20px;
}
.product-title {
font-size: 18px;
margin-bottom: 10px;
line-height: 1;
}
.product-title a {
text-decoration: none;
color: #242424;
}
.price-box {
color: #666;
font-size: 18px;
line-height: 1;
}
.star-rating {
margin-bottom: 10px;
font-size: 13px;
position: relative;
font-family: "FontAwesome";
}
.star-rating:before {
content: "\f005 \f005 \f005 \f005 \f005";
position: absolute;
top: 0;
left: 0;
color: #FF9919;
}
Как меню навигации
по сайту, меню профиля пользователя
и т. д. можно скрыть и появляться они будут при нажатии и наведении. Некоторые могут сказать, что от этого страдает юзабилити страницы. Не думаю, так как страница стает чище, а значит легче ориентироваться. Человек не путается в горе ссылок.
Сегодня я подготовил коллекцию слайд-панелей
, которые по умолчанию на странице скрыты. Чтоб вызвать меню
, требуется нажать или навести мышкой на соответствующую иконку. Этот прием пришел в веб-дизайн из мобильных приложений , где нельзя разметить много элементов на одном экране. Со временем такие панели перекочевали и в веб-сайты. Данная коллекция пригодятся, в первую очередь, разработчиками мобильных, . При маленьком разрешении экрана будет появляться именно такая выезжающая навигация
, а на нормальных, больших мониторах можно сделать обычное меню, к которому все привыкли. Таким образом человек с мобильным устройством не запутается в вашем сайте, так как он давным давно привык к использованию слайд-панелей
, ведь все приложения в его смартфоне работают по такому же принципу.
Хочу заметить, что в данную коллекцию вошли плагины
, которые заточены только под мобильные сайты
и на широких мониторах их использование будет неуместно. Хотя присутствуют и универсальные панели, которые подойдут для любого веб-сайта. Смотрите демо и выбирайте, что подойдет под ваши задачи.
Выпадающие панели работают на . Внедрить в свой сайт такое меню не составит особого труда, а на сайтах разработчиков присутствуют детальные инструкции по использованию их продукта.
Вскоре мы планируем редизайн сайта «Постовой» и будем использовать в верстке один из jquery плагинов
, которые представлены ниже.
Итак. К вашему вниманию коллекция из 20 jquery плагинов выпадающих слайд-панелей
для вашего сайта. Не забываем оставлять комментарии.
Transitions for Off-Canvas Navigations
Чрезвычайно мощный плагин позволяющий организовать слайд-панель , которая будет показываться с разными анимационными эффектами в том числе и 3D. Плагин включает в себя 14 эффектов анимации.
jPanelMenuПанель навигации выполнена в стилистике IOS приложений. Легкое и быстрое меню, которое облегчит разработку мобильного сайта.
Recreate Google Nexus MenuВыезжающая панель выполнена по аналогии с Google Nexus меню.
bigSlide - слайд-панель навигации на JqueryСлайд-панель подойдет как для мобильного сайта, так и для обычного. Чтоб ее вызвать, требуется нажать на иконку изображающую три полоски.
Multi-Level Push MenuJqutry плагин работает по аналогии с bigSlide. Панель вызывается при клике на иконку. Преимущество этого меню в том, что оно поддерживает многоуровневую структуру.
Box Lid MenuОчень красивая слайд-панель навигации с 3D эффектом.
Animated Border MenusКликнув на плюсик в уголку экрана появляется маленькая боковая панель с иконками. Чтоб ее скрыть, требуется нажать на иконку с символом "-".
Snap.jsСлайд-панель предназначена для мобильных устройств. Меню вызывается с помощью перетаскивания экрана курсором мышки или, если на мобильном устройстве, пальцем.
Slide and Push Menus | 
MenyJquery плагин позволяющий реализовать у себя на сайте классную слайд-панель навигации с 3D эффектом.
mb.jqueryВ отличии от других панелей, она появляется поверх экрана, а не двигает его. В блоке можно поместить любой html, текст и вообще все что вам угодно. 
Android DockПанель заточена под мобильные сайты и находится внизу экрана. При нажатии появляются иконки, в которые можно поместить любые ссылки.
Слайд-панель с контентомКлассная слайд-панель выполнена в виде двух уровней. Первый - меню. Второй - контент. Сейчас такой эффект очень популярен среди дизайнеров и веб-разработчиков. Можно найти массу вариантов применения. По похожему принципу работает почтовик майкрософта.
Доброе утро всем, кто читает данный материал и на этот раз я решил написать очередное меню на 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; }
А на этом все, спасибо большое за внимание и не забывайте подписываться на нас, а также делится с другими полезным и нужным контентом!)
