Responsive nav - плагин адаптивного меню
Плагин адаптивной навигации без зависимостей от каких-либо библиотек и с быстрой поддержкой touch устройств.
Responsive Nav - это крошечный jаvascript плагин, который весит всего 5Кб и позволит Вам создать переключатель навигации для маленьких дисплеев. Плагин использует touch события и CSS3 transitions для лучшей производительности. Он также включает "умный" обходной путь, который позволяет сделать возможным переход от "нулевой" высоты (height:0), до "auto" (height:auto), что обычно невозможно с помощью CSS3 переходов.
Работает со всеми основными десктопными и мобильными браузерами, включая IE6 и выше.
HTML
Для работы плагина, необходимо подключить следующие файлы между тегами head:
<link rel="stylesheet" href="responsive-nav.css">
<script src="responsive-nav.js"></script>
Разметка:
<div id="nav">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Проекты</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
JS
Вызов плагина осуществляется так:
<script>
var navigation = responsiveNav("#nav");
</script>
Опции
var navigation = responsiveNav("#nav", { // Selector: ID оболочки
animate: true, // Boolean: Испоьзовать CSS3 transitions, true или false
transition: 400, // Integer: Скорость перехода, в миллисекундах
label: "Меню", // String: Метка для переключателя навигации
insert: "after", // String: Вставить переключатель до (before) или после (after) навигации
customToggle: "", // Selector: ID для пользовательского переключателя (отличного от дефолтного)
openPos: "relative", // String: Позиционирование открытой навигации, relative или static
jsClass: "js", // String: 'JS enabled' класс добавляемый к тегу html
init: function(){}, // Function: Init callback (инициализация)
open: function(){}, // Function: Open callback (открытие)
close: function(){} // Function: Close callback (закрытие)
});
Методы
// Уничтожить
navigation.destroy();
// Переключить
navigation.toggle();
Протестирован на следующих платформах:
- iOS 4.2.1+
- Android 1.6+
- Windows Phone 7.5 & 7.8
- Blackberry 7.0+
- Blackberry Tablet 2.0+
- Kindle 3.3+
- Maemo 5.0+
- Meego 1.2+
- Symbian 3
- Symbian Belle
- Symbian S40 Asha
- webOS 2.0+
- Windows XP
- Windows 7
- Mac OS X