Неймовірне меню для сайту як на airbnb ios 7

Може ви вже бачили новий дизайн Airbnb iOS 7? Вони зробили просто приголомшливу анімацію для меню. І, що що дійсно вражає, цю анімацію відтворили за допомогою javascript. Був написаний плагін, який називається Fly Side Menu. Fly side menu дозволяє трансформувати всю сторінку і зміщувати її вліво, вправо, вгору або вниз, щоб з протилежного боку розмістити меню.

Відео: Огляд додатки Airbnb для iPhone, iPad і AppleTV

Також цікаві види меню знаходяться в цьому уроці - Анимированное висувається меню.

Реальний приклад можна побачити тут:

Відео: Виграй Apple на 50000р. від Wylsacom

Подивитися прімерСкачать

HTML частина

Підключіть обов`язково останню jQuery бібліотеку (вона доступна тут). Структура наступна:

Відео: Як ми зняли офігенно квартиру в Берліні з Airbnb | UiP

1234567891011

lt;bodygt; ..lt;ul class="Sidemenu"gt;lt;ligt; lt;a href="..."gt; ...lt;/agt; lt;/ligt;lt;ligt; lt;a href="..."gt; ...lt;/agt; lt;/ligt;lt;ligt; lt;a href="..."gt; ...lt;/agt; lt;/ligt;lt;ligt; lt;a href="..."gt; ...lt;/agt; lt;/ligt;lt;ligt; lt;a href="..."gt; ...lt;/agt; lt;/ligt;lt;/ulgt; ..lt;/bodygt;

javascript частина

Розглянемо більш докладно які параметри може приймати функція, щоб змінювати боку, в які можна «зміщувати» сторінку:

123456

$(".sidemenu").fly_sidemenu({btnContent: "=",.position: "Left",customSelector: "Li",hideButton: false})-

Відео: Loop Matinal 189 - Quinta-feira, 21/07/2016

• btnContent - іконка меню, тобто перемикач. За замовчуванням стоїть знак одно, але ви можете це змінити.
• position - задає напрямок куди може зміщуватися меню: bottom (вниз), top (вгору), left (ліворуч) і right (праворуч).
• customSelector - селектор селектор навігації, звичайно можна вибрати інший користувальницький селектор, за допомогою якого організовано меню.
• hideButton - ховати або не ховати кнопку показу / приховування при появі меню.

висновок

Погодьтеся, ефект дійсно вражає!

Успіхів!

джерело: onextrapixel.com