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

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

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

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

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

SlideMenu.slideDown(300);

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

SlideMenu.slideUp(300);

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

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

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

HTML

• Меню 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 body { border-top: 10px solid #ff725d; } h1 { margin: 90px 0 50px; color: #666; text-align: center; font-size: 50px; } .content { margin: 0 auto 20px; max-width: 680px; padding: 0 3%; } .content img { width: 260px; height: auto; border: solid 10px #fff; box-shadow: 0 1px 2px #999; float: left; margin: 0 3% 3%; } p { font-size: 110%; text-align: center; line-height: 1.5; margin: 0 0 15px; } .slide_container { width: 100%; position: absolute; top: 0; z-index: 999; } #menu { padding: 50px 0; border-bottom: solid 10px #ff725d; background: #fff; display: none; } #menu ul { overflow: hidden; margin: 0 auto; padding: 0; max-width: 800px; width: 100%; } #menu li { float: left; padding: 0; width: 20%; list-style: none; } #menu li a { display: block; margin: 0 5%; padding: 20px 0; border: solid 1px #333; background: #fff; color: #666; text-align: center; text-decoration: none; font-size: 18px; } #menu li a:hover { border: solid 1px #12a1c6; color: #12a1c6; } #menu li a:active { border: solid 1px #0e7b97; color: #0e7b97; } #btn { margin: 0 auto; width: 200px; height: 30px; border-radius: 0 0 5px 5px; background: #ff725d; cursor: pointer; } #btn span { position: relative; top: 12px; left: 50%; display: block; margin-left: -25px; width: 50px; height: 5px; border-radius: 5px; background: #fff; box-shadow: inset 1px 1px 2px #ddd; } .layer { position: fixed; top: 0; width: 100%; height: 100%; background-color: #ff725d; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; opacity: 0.5; } @media screen and (max-width: 480px) { #menu { padding: 5%; } #menu li { width: 100%; } #menu li a { border-top: none; } #menu li a:hover { margin-top: -1px; } #menu li:first-child a { border-top: solid 1px #333; } #menu li:first-child a:hover { margin-top: 0; border-top: solid 1px #12a1c6; } } JS $(function() { var openBtn = $("#btn"), slideMenu = $("#menu"), layer = $("").addClass("layer"); openBtn.on("click", function() { if (slideMenu.is(":hidden")) { layer.appendTo("body"); slideMenu.slideDown(300); } else { slideMenu.slideUp(300); layer.remove(); } }); });

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

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

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

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

Скачать

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

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

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

1 2 3 4 5

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

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

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

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

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

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

И снова ДЕМО , для начала.

Начнем пожалуй со HTML -структуры:

• Link 1
• Link 2
• Link 3

input нам необходим для определения видимости меню: то есть если он выбран, то меню видно и наоборот.

label – это наша кнопка-бургер, которая привязана к инпуту.

ul – сам блок меню.

Теперь CSS (писал только для WebKit -браузеров: Opera 16+, Safari, Chrome).

Наше меню:

Hidden-menu { display: block; position: fixed; list-style:none; padding: 10px; margin: 0; box-sizing: border-box; width: 200px; background-color: #eee; height: 100%; top: 0; left: -200px; transition: left .2s; z-index: 2; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; }

Здесь много раздолья для креативных людей, но главные параметры – это width и left . Он должны иметь одинаковое значение, но left при этом является отрицательным. Тем самым мы прячем нашу меню слева от экрана. Также добавил анимацию transition: left .2s для красоты процесса выезда из-за пределов экрана.

Наш чекбокс:

Hidden-menu-ticker { display: none; }

Его просто делаем невидимым.

Кнопка-бургер:

Btn-menu { color: #fff; background-color: #666; padding: 5px; position: fixed; top: 5px; left: 5px; cursor: pointer; transition: left .23s; z-index: 3; width: 25px; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .btn-menu span { display: block; height: 5px; background-color: #fff; 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; } .hidden-menu-ticker:checked ~ .hidden-menu { left: 0; } .hidden-menu-ticker:checked ~ .btn-menu span.first { -webkit-transform: rotate(45deg); top: 10px; } .hidden-menu-ticker:checked ~ .btn-menu span.second { opacity: 0; } .hidden-menu-ticker:checked ~ .btn-menu span.third { -webkit-transform: rotate(-45deg); top: -10px; }

CSS3-селекторы позволяют нам определять состояние чекбокса и применять, в зависимости от этого те или иные свойства для соседних элементов:checked ~ . В данном примере мы при «чекнутом» инпуте сдвигаем кнопку меню.hidden-menu-ticker:checked ~ .btn-menu влево на 160 пикселей, меню до левого края.hidden-menu-ticker:checked ~ .hidden-menu . Остальные стили написаны для полосок кнопки меню, чтобы они при нажатии превращались в крестик и наоборот.

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

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

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

МЕНЮ

• Главная
• О нас
• Наши услуги
• Портфолио
• Блог
• Контакты

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

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

Как меню навигации по сайту, меню профиля пользователя и т. д. можно скрыть и появляться они будут при нажатии и наведении. Некоторые могут сказать, что от этого страдает юзабилити страницы. Не думаю, так как страница стает чище, а значит легче ориентироваться. Человек не путается в горе ссылок.
Сегодня я подготовил коллекцию слайд-панелей , которые по умолчанию на странице скрыты. Чтоб вызвать меню , требуется нажать или навести мышкой на соответствующую иконку. Этот прием пришел в веб-дизайн из мобильных приложений , где нельзя разметить много элементов на одном экране. Со временем такие панели перекочевали и в веб-сайты. Данная коллекция пригодятся, в первую очередь, разработчиками мобильных, . При маленьком разрешении экрана будет появляться именно такая выезжающая навигация , а на нормальных, больших мониторах можно сделать обычное меню, к которому все привыкли. Таким образом человек с мобильным устройством не запутается в вашем сайте, так как он давным давно привык к использованию слайд-панелей , ведь все приложения в его смартфоне работают по такому же принципу.
Хочу заметить, что в данную коллекцию вошли плагины , которые заточены только под мобильные сайты и на широких мониторах их использование будет неуместно. Хотя присутствуют и универсальные панели, которые подойдут для любого веб-сайта. Смотрите демо и выбирайте, что подойдет под ваши задачи.
Выпадающие панели работают на . Внедрить в свой сайт такое меню не составит особого труда, а на сайтах разработчиков присутствуют детальные инструкции по использованию их продукта.
Вскоре мы планируем редизайн сайта «Постовой» и будем использовать в верстке один из jquery плагинов , которые представлены ниже.
Итак. К вашему вниманию коллекция из 20 jquery плагинов выпадающих слайд-панелей для вашего сайта. Не забываем оставлять комментарии.

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

Слайд-панель с контентомКлассная слайд-панель выполнена в виде двух уровней. Первый - меню. Второй - контент. Сейчас такой эффект очень популярен среди дизайнеров и веб-разработчиков. Можно найти массу вариантов применения. По похожему принципу работает почтовик майкрософта.