waSlideMenu.js - Багаторівневе прокручується меню

  jQuery-плагін, який перетворює вкладене (деревоподібна) меню в систему прокручуються меню.
 
Репозиторій: github.com / webasyst / waslidemenu
Спробувати: jsfiddle.net/7LnSY /
Приклад: demo-ru.webasyst.com
 
Завдання зробити таке меню з'явилася в процесі роботи над новою темою дизайну для додатків Webasyst. Як прототип розглядалися навігаційні меню, які можна зустріти на більшості планшетів і смартфонів на базі iOS, Android і т.д. У вебі був знайдений тільки один красивий прототип реалізації такого меню — в хелп-центрі Facebook . Готових простих рішень для такого меню не знайшли, тому написали свій плагін. Плагін безкоштовний (MIT) — користуйтеся на здоров'я.
 
 
Підключення
 
<link href="/path/to/waslidemenu.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/path/to/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.waslidemenu.min.js"></script>

 
Структура меню
Працює на будь вкладеної структурі незалежно від розмітки: ul li, div і т.д.
 
<nav id="menu">
	<ul>
		<li>
			<a href="#1">Parent 1</a>
			<ul>
				<li><a href="#1.1">Child 1.1</a>
					<ul>
						<li><a href="#1.1.1">We need to go deeper</li>
					</ul>
				</li>
				<li><a href="#1.2">Child 1.2</a></li>
			</ul>
		</li>
		<li><a href="#2">Parent 2</a></li>
		<li><a href="#2">Parent 3</a></li>
	</ul>
</nav>

 
<nav id="menu">
	<div class="menu">
		<div class="item">
			<a href="#1">1</a>
			<div class="menu">
				<div class="item"><a href="#1.1">1.1</a></div>
				<div class="item"><a href="#1.2">1.2</a></div>
			</div>
		</div>
		<div class="item"><a href="#2">2</a></div>
		<div class="item"><a href="#3">3</a></div>
	</div>
</nav>

 
Ініціалізація плагіна
Просто:
 
$('#menu').waSlideMenu();

Або можна додати трохи налаштувань:
 
$('#menu').waSlideMenu({
    menuSelector : '.menu',
    itemSelector : '.item',
    autoHeightMenu: true,
    minHeightMenu: 400,
    backLinkContent: 'Back please',
    backOnTop: true,
    scrollToTopSpeed: 200,
    slideSpeed: 500,
    onLatestClick: function(){
        alert('Last node ' + $(this).text() + ' selected')
    }
});

 
Налаштування
 
     
  • menuSelector: '. menu' — селектор для меню, за умовчанням ul;
  •  
  • itemSelector: '. item' — селектор для пунктів меню, за умовчанням li;
  •  
  • autoHeightMenu: true — автоматично встановлює висоту по висоті підміню після переходу;
  •  
  • minHeightMenu: 400 — мінімальна висота меню при ініціалізації і наступних змінах висоти;
  •  
  • backLinkContent: 'Back please' — контент для посилання «Назад»;
  •  
  • backOnTop: true — вибір розташування розташування посилання «Назад»;
  •  
  • scrollToTopSpeed: 200 — швидкість прокрутки сторінки вгору до «поточного» пункту меню. Виникають моменти, коли після слайда до наступного підменю його пункти пропадають з видимої області. У цьому випадку сторінка прокрутитися наверх, до обраного пункту меню.
  •  
  • slideSpeed: 500 — швидкість слайда меню;
  •  
  • Інші можливі настройки докладно розписані в README на github.
  •  
 
Callbacks
 
$('#menu').waSlideMenu({
	onInit : function(){
        alert('Here I am!');
    },
    onLatestClick: function(){
        alert('Last node ' + $(this).text() + ' selected')
    }
});

 
     
  • onInit — спрацьовує відразу після ініціалізації меню;
  •  
  • onSlideForward — викликається після переходу на рівень «вглиб» меню;
  •  
  • onSlideBack — викликається після переходу на рівень назад;
  •  
  • afterSlide — спрацьовує після завершення слайда меню;
  •  
  • onLatestClick — викликається після кліку на крайньому пункті меню;
  •  
  • afterLoadAlways — викликається завжди, незалежно від результат завантаження URL;
  •  
  • afterLoadDone — викликається після успішного завантаження URL.
  •  
 
Інші фичи і вимоги
 
     
  • Плагін можна підключати до необмеженої кількості меню на сторінці.
  •  
  • Може довантажувати необхідний контент, встановлює Title сторінки, змінює URL в адресному рядку браузера.
  •  
  • Непогано працює в різних браузерах (IE9 +), на смартфонах і планшетах.
  •  
  • Всілякі callback і events.
  •  
  • Треба використовувати jQuery 1.7 +.
  •  
  • Ліцензія MIT.
  •  
 
Корисні посилання
 Ще раз: посилання на репозиторій і демо . Буду вдячний за відгуки та пропозиції!
  
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.