6 317 Скрипты / Menu & Nav

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
Скачать 2046Загрузок 57,33 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи