
Октябрь 25, 2019 Запись была обновлена
Невероятное меню для сайта как на Airbnb iOS 7

Может вы уже видели новый дизайн Airbnb iOS 7? Они сделали просто потрясающую анимацию для меню. И, что что действительно поражает, данную анимацию воссоздали с помощью Javascript. Был написан плагин, который называется Fly Side Menu. Fly side menu позволяет трансформировать всю страницу и смещать ее влево, вправо, вверх или вниз, чтобы с противоположной стороны разместить меню.
Также интересные виды меню находятся в этом уроке — Анимированное выдвигающееся меню.
Реальный пример можно увидеть здесь:
Посмотреть примерСкачать
HTML часть
Подключите обязательно последнюю jQuery библиотеку(она доступна здесь). Структура следующая:
1 2 3 4 5 6 7 8 9 10 11 | <body> .. <ul class="sidemenu"> <li><a href="...">...</a></li> <li><a href="...">...</a></li> <li><a href="...">...</a></li> <li><a href="...">...</a></li> <li><a href="...">...</a></li> </ul> .. </body> |
Javascript часть
Рассмотрим более подробно какие параметры может принимать функция, чтобы изменять стороны, в которые можно «смещать» страницу:
1 2 3 4 5 6 | $(".sidemenu").fly_sidemenu({ btnContent: "=",. position: "left", customSelector: "li", hideButton: false }); |
- btnContent — иконка меню, т.е. переключатель. По умолчанию стоит знак равно, но вы можете это изменить.
- position — задает направление куда может смещаться меню: bottom(вниз), top(вверх), left(влево) и right(вправо).
- customSelector — селектор селектор навигации, конечно можно выбрать другой пользовательский селектор, с помощью которого организовано меню.
- hideButton — прятать или не прятать кнопку показа/скрытия при появлении меню.
Вывод
Согласитесь, эффект действительно поражает!
Успехов!
Источник: www.onextrapixel.com
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)