9 332 Скрипты / Menu & Nav

Адаптивное многоуровневое меню

Экспериментальное меню позволяющее с экономить пространство на вашем сайте, где требуется использование много уровневого меню. "Детки" заменяют собой "родителей" не загромождая страницу. Меню можно устанавливать на страницы с адаптивным дизайном.

HTML

Структура меню:

CSS

Анимация определена в CSS:

JS

Подключаем jQuery и плагин dlmenu:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.dlmenu.js"></script>

Вызов плагина происходит следующим образом:

$( '#dl-menu' ).dlmenu({
    animationClasses : { classin : 'НАЗВАНИЕ-КЛАССА-АНИМАЦИИ', classout : 'НАЗВАНИЕ-КЛАССА-АНИМАЦИИ' }
});

Например в Демо 3:

<script>
 $(function() {
  $( '#dl-menu' ).dlmenu({
   animationClasses : { classin : 'dl-animate-in-5', classout : 'dl-animate-out-5' }
  });
});
</script>
Скачать 3718Загрузок 14,46 Kb
Демо

Комментарии

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

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