Боковое вытягиваемое меню

Поэкспериментируем с выдвигающимся навигационным меню на устройствах с маленьким экраном.

В качестве образца для подражания возьмём сайдбары на adnroid/ios-устройствах.

Facebook-Android-UpdateDec-8-Menu

В основу разработки положим bootstrap 3 и его navbar, не будем изобретать велосипед.

Вместо collapse-элемента добавим наш компонент, а так же свой toggle-элемент.

Подключаем js и css, или же less при использовании чистого bootsrtap.

Особенности плагина:

  • можно указать открывающий/закрывающий/переключающий элементы;
  • открытие/закрытие происходит при сдвиге меню больше чем на половину;
  • доступно быстрое открытие/закрытие меню при условии быстрого касания и минимального сдвига;
  • swipe-открытие временно отключено на iphone/ipad из-за наличия встроенного перехода по истории тем же движением.

Если соблюсти именование дата-атрибутов, то плагин запустится автоматически. Однако, можно переопределить параметры:

Пример работы плагина

Github repo

Email this to someoneShare on VKShare on FacebookTweet about this on TwitterPin on PinterestShare on Google+Share on LinkedIn