Jquery боковое выезжающее меню. Большой обзор красивых многоуровневых меню с codepen. Вертикальное меню с картинками
Вертикальное меню делается на основе списка, маркированного или нумерованного. По умолчанию все элементы списка располагаются вертикально, занимая по ширине всю ширину элемента контейнера , который в свою очередь занимает всю ширину его блока-контейнера.
Элементы списка могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.
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 можно сделать на сайте всё что угодно, нужно лишь определиться надо ли это вашему сайту. Мы все стремимся сделать сайт наиболее удобный для пользователя, чтобы ему было приятно перемещаться по сайту и это было максимально легко. Меню играет большую роль когда посетитель «гуляет» по вашему сайту. И в этом уроке мы создадим выдвигающееся меню, которое может прятаться и появляться когда это необходимо пользователю.
Также интересные выдвигающиеся меню:
Пример можно увидеть здесь:
СкачатьВ этом уроке мы будем использовать 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 структурой закончили, сейчас переходим к стилям.
Хабр, привет!
На С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 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.
В данной статье хочу предложить вашему вниманию пример создания выезжающего меню . Данный пример выезжающего меню создан с помощью 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 подключена на Вашей странице.
1. Структура
Body, html { height : 100 % 100 % ; width : 100 % ; } #sidebar { position : absolute ; background : #DF314D ; width : 240px ; height : 100 % ; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin : 0 ; padding : 0 ; list-style : none ; } #sidebar ul li { margin : 0 ; } #sidebar ul li a { padding : 15px 20px ; font-size : 16px ; font-weight : 100 ; color : white ; text-decoration : none ; display : block ; border-bottom : 1px solid #C9223D ; -webkit-transition: background 0 .3s ease-in-out; -moz-transition: background 0 .3s ease-in-out; -ms-transition: background 0 .3s ease-in-out; -o-transition: background 0 .3s ease-in-out; transition: background 0 .3s ease-in-out; } #sidebar ul li:hover a { background : #C9223D ; }
Для начала мы создадим структуру для левого бокового меню, которую мы в результате спрячем влево. Мы добавили несколько основных стилей в пример, так что не стесняйтесь изменять вид Вашего бокового меню. Мы также добавили пустой блок под названием main-content . Этот блок будет содержать все элементы, которые Вы хотите показать на этой странице. Мы заполним его в следующем шаге.
2. Создание простого бокового меню
Body, html { height : 100 % ; margin : 0 ; overflow:hidden ; font-family : helvetica; font-weight : 100 ; } .container { position : relative ; height : 100 % ; width : 100 % ; left : 0 ; -webkit-transition: left 0 .4s ease-in-out; -moz-transition: left 0 .4s ease-in-out; -ms-transition: left 0 .4s ease-in-out; -o-transition: left 0 .4s ease-in-out; transition: left 0 .4s ease-in-out; } .container .open-sidebar { left : 240px ; } #sidebar { position : absolute ; left : -240px ; background : #DF314D ; width : 240px ; height : 100 % ; box-sizing: border-box; } #sidebar ul { margin : 0 ; padding : 0 ; list-style : none ; } #sidebar ul li { margin : 0 ; } #sidebar ul li a { padding : 15px 20px ; font-size : 16px ; font-weight : 100 ; color : white ; text-decoration : none ; display : block ; border-bottom : 1px solid #C9223D ; -webkit-transition: background 0 .3s ease-in-out; -moz-transition: background 0 .3s ease-in-out; -ms-transition: background 0 .3s ease-in-out; -o-transition: background 0 .3s ease-in-out; transition: background 0 .3s ease-in-out; } #sidebar ul li:hover a { background : #C9223D ; } .main-content { width : 100 % ; height : 100 % 100 % 100 % ; line-height : 160 % ; } .main-content #sidebar-toggle { background : #DF314D ; border-radius: 3px ; display : block ; position : relative ; padding : 10px 7px ; float : left ; } .main-content #sidebar-toggle .bar { display : block ; width : 18px ; margin-bottom : 3px ; height : 2px ; background-color : #fff ; border-radius: 1px ; } .main-content #sidebar-toggle .bar :last-child { margin-bottom : 0 ; }
;Теперь мы спрячем боковое меню влево с помощью свойств position:relative и left: -240px, это значение равняется ширине бокового меню. Мы добавили кнопку и скрипт jQuery, что позволит нам вызвать боковое меню по нажатию, переключая класс open-sidebar для контейнера, в котором находятся боковое меню и блок main-content.
После этого мы просто передвигаем весь контейнер влево на 240px, и это заставит появиться левое боковое меню. Если пользователь снова нажмет на кнопку, скрипт jQuery удалит класс у контейнера, и боковое меню исчезнет. Чтобы анимировать боковое меню так, как будто оно приезжает из левого края экрана, мы добавили переход стиля, чтобы создать такую же функциональность, как у приложений для смартфонов.
Теперь у нас есть простое боковое меню, которое вызывается нажатием кнопки мыши.
3. Делаем меню вытягиваемымCreating Swipeable Side Menu For the Web
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Body, html { height : 100 % ; margin : 0 ; overflow:hidden ; font-family : helvetica; font-weight : 100 ; } .container { position : relative ; height : 100 % ; width : 100 % ; left : 0 ; -webkit-transition: left 0 .4s ease-in-out; -moz-transition: left 0 .4s ease-in-out; -ms-transition: left 0 .4s ease-in-out; -o-transition: left 0 .4s ease-in-out; transition: left 0 .4s ease-in-out; } .container .open-sidebar { left : 240px ; } .swipe-area { position : absolute ; width : 50px ; left : 0 ; top : 0 ; height : 100 % ; background : #f3f3f3 ; z-index : 0 ; } #sidebar { background : #DF314D ; position : absolute ; width : 240px ; height : 100 % ; left : -240px ; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin : 0 ; padding : 0 ; list-style : none ; } #sidebar ul li { margin : 0 ; } #sidebar ul li a { padding : 15px 20px ; font-size : 16px ; font-weight : 100 ; color : white ; text-decoration : none ; display : block ; border-bottom : 1px solid #C9223D ; -webkit-transition: background 0 .3s ease-in-out; -moz-transition: background 0 .3s ease-in-out; -ms-transition: background 0 .3s ease-in-out; -o-transition: background 0 .3s ease-in-out; transition: background 0 .3s ease-in-out; } #sidebar ul li:hover a { background : #C9223D ; } .main-content { width : 100 % ; height : 100 % ; padding : 10px ; box-sizing: border-box; -moz-box-sizing: border-box; position : relative ; } .main-content .content { box-sizing: border-box; -moz-box-sizing: border-box; padding-left : 60px ; width : 100 % ; } .main-content .content h1{ font-weight : 100 ; } .main-content .content p{ width : 100 % ; line-height : 160 % ; } .main-content #sidebar-toggle { background : #DF314D ; border-radius: 3px ; display : block ; position : relative ; padding : 10px 7px ; float : left ; } .main-content #sidebar-toggle .bar { display : block ; width : 18px ; margin-bottom : 3px ; height : 2px ; background-color : #fff ; border-radius: 1px ; } .main-content #sidebar-toggle .bar :last-child { margin-bottom : 0 ; }
; $(".swipe-area" ) .swipe ({ swipeStatus:function (event, phase, direction, distance, duration, fingers) { if (phase=="move" && direction =="right" ) { $(".container" ) .addClass ("open-sidebar" ) ; return false ; } if (phase=="move" && direction =="left" ) { $(".container" ) .removeClass ("open-sidebar" ) ; return false ; } } } ) ;Самая сложная часть этого урока - сделать боковое меню вытягиваемым как на браузерах для смартфонов, так и на веб-браузерах для настольных компьютеров. На этом этапе нам нужно подключить хороший плагин, под названием TouchSwipe , созданный Matt Bryson для управления процессом вытягивания меню. Убедитесь, что этот плагин подключен в Вашем HTML файле.
Теперь, когда у нас есть возможность обнаружить жесты вытягивания и перетаскивания на смартфоне, мы воспользуемся этим, чтобы вызвать боковое меню. Ранее мы столкнулись с проблемой, так как мы применили обнаружение действия вытягивания для страницы целиком, то на смартфонах стало невозможно прокручивать страницу при увеличении, потому что открывалось боковое меню.
Так как это неприемлемо, мы добавили пустой блок класса swipe-area, чтобы определить область обнаружения жеста вытягивания. Область определения вытягивания расположена у левого края страницы, так что пользователь сможет вызвать боковое меню вытягиванием направо у левого края экрана. Это решает проблему случайного открытия меню при прокрутке страницы.
В нашем скрипте JS мы определяем действие вытягивания, использую функцию swipe(), выполняемую плагином TouchSwipe. Мы обнаруживаем две части действия вытягивания: движение и направление. Мы просто добавляем класс open-sidebar, чтобы вызвать меню, когда курсор мыши или палец пользователя движется вправо. Мы удаляем этот класс, если курсор мыши или палец пользователя движется в противоположном направлении.
В нашем эксперименте эта функция отлично работает на смартфонах, но не очень хорошо работает в браузерах на настольных компьютерах, так как когда мы двигаем мышку с зажатой кнопкой, браузеры запускают инструмент по выделению текста, который перебивает наше действие по определению вытягивания. Нам это не нужно, поэтому мы возвращаем false после того, как мы добавляем или удаляем класс open-sidebar. И это предотвращает запуск инструмента по выделению текста по умолчанию.
ЗаключениеИ это все! У нас теперь есть вытягиваемое боковое меню, которое работает как в браузерах на настольных компьютерах, так и на смартфонах. Надеемся, что Вам понравился этот урок.
Перевод — Дежурка
