Лого SiteHere.ru

Невероятное меню для сайта как на Airbnb iOS 7

Меню 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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *