Продолжаем нашу неделю занимательной анимации с Сергеем Купером, сегодня мы поговорим о Bootstrap и многоуровневом меню при помощи плагина. Dropdown On Hover — это плагин jQuery, используемый для создания многоуровневых раскрывающихся меню Bootstrap с интересной анимацией CSS3 на основе Animate.сss. Такое меню выглядит весьма необычно благодаря анимации, по этом советуем вам к нему присмотреться и в дальнейшем попробовать такою навигацию в своих, будущих, проектах. Давайте посмотрим, что у нас получилось.

 

Вы можете найти много интересных материалов для себя, а также бесплатные шаблоны и не только у наших партнеров ниже, попробуйте и не пропустите интересные предложения:

Шаг 1. HTML

Cначала необходимо подключить скрипты к странице, не мало важно, чтобы они были именно в таком порядке, как у нас, часто пользователи подключают их в самом конце, в результате чего все не работает так как надо:

Теперь нужно создать многоуровневое раскрывающееся меню из вложенного списка html, которое мы сделаем следующим образом:

Вы можете применить пользовательские анимации CSS3 к многоуровневому выпадающему меню с помощью атрибута data-animation:

В результате вы получаете замечательное выпадающее мега меню, которое отлично подойдет для вашего проекта, и оживить навигацию красивой анимацией.

Вот и все. Готово!