5 адаптивных меню для разных задач

jQuery плагины и JavaScript решения: Jquery плагины и решения: 5 адаптивных меню для разных задач
Недавно мы затеяли разработку адаптивного портала с замысловатыми меню. Решили писать скрипты только в том случае, если не найдем в сети того, что нужно. Задумывалось несколько разных навигаций с разными особенностями. К нашему счастью, нашлось практически все, кроме одного. Однако, как раз перед началом работы над написанием этого меню, все же удалось найти то, что нужно.
Попробовали довольно много адаптивных меню. В этом топике я решил сделать подборку наиболее стоящих и интересных из тех, что пришлось нам опробовать. Все адаптивные меню не похожи друг на друга и разработаны исключительно для определенных задач.
Итак. Вашему вниманию 5 адаптивных меню на все случаи жизни.

Смотрите также:
20 jQuery плагинов полноэкранного меню
6 jQuery плагинов для создания фиксированного меню
20 слайд-панелей навигации для сайта

flexMenu
Это именно то меню, которое было так тяжело найти и функционал которого мы уже собирались начать писать.
flexMenuадаптивное меню, которое подойдет для сайтов с динамически изменяющейся шириной. Главная и уникальная его особенность — это добавление пункта «Еще» и перенос в его выпадающий список пунктов, которые не помещаются в ширину всей навигации. То есть, если мы будем смотреть на больших мониторах, увидим все пункты. Как только начнем сжимать окно браузера, появится в конце меню пункт «Еще» и в его выпадающий список будут динамически перемещаться пункты, которые не помещаются по мере сжатия окна. Таким образом, у нас получится адаптивное меню с фиксированной высотой и «играющей» шириной.
При работе с flexMenu мы столкнулись с одной проблемой. В нашем случае справа был логотип с float: left;, справа размещалось данное меню также с float: left; и справа с float: right; был еще один блок. При ресайзе окна браузера получалось, что блок справа перепрыгивал под меню, далее все это перепрыгивало под логотип и потом уже задействовался функционал сжатия меню. Как бороться с данной особенностью верстки, будет в последующих топиках. Следите за обновлениями.

P.S В статье 10 лучших jQuery плагинов для работы с текстом мы публиковали плагин под названием TextTailor, который позволяет обрезать текст в зависимости от высоты родительского блока и убрать все, что не поместилось, под кат.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 5 адаптивных меню для разных задач


Code a Responsive Navigation Menu
Отличный пример адаптивного меню навигации. При ресайзе окна браузера мы увидим, что пункты переходят друг под друга и выравниваются по ширине. Смотрится очень аккуратно. Самое главное, данное адаптивное меню будет отлично смотреться на мобильных устройствах и, что более преимущественно, оно удобно в использовании на девайсах с тач дисплеем.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 5 адаптивных меню для разных задач


Multi-level Flat Menu — адаптивная навигация
Multi-level Flat Menu — это адаптивное, многоуровневое меню, работающее с помощью библиотек Jquery. На десктопных мониторах мы видим обычное, привычное нам горизонтальное меню. На мобильных устройствах горизонтальная навигация трансформируется в выпадающий список.
Multi-level Flat Menu — отличный выбор, если вам требуется сэкономить место на странице.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 5 адаптивных меню для разных задач


SlickNav
SlickNavадаптивное меню. На мобильных устройствах превращается в кнопку, при нажатии на которую выпадают пункты навигации поверх контента, который располагается ниже.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 5 адаптивных меню для разных задач


Yamm Megamenu — бесплатное адаптивное мегаменю
Напоследок хотел бы представить вам бесплатное решение адаптивного мегаменю. Навигацию Yamm 3 следует использовать с сеткой Bootstrap 3.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 5 адаптивных меню для разных задач
Напишите свой комментарий
comments powered by HyperComments