5 адаптивных меню для разных задач / jQuery плагины и JavaScript решения / Постовой
Недавно мы затеяли разработку адаптивного портала с замысловатыми меню. Решили писать скрипты только в том случае, если не найдем в сети того, что нужно. Задумывалось несколько разных навигаций с разными особенностями. К нашему счастью, нашлось практически все, кроме одного. Однако, как раз перед началом работы над написанием этого меню, все же удалось найти то, что нужно.
Попробовали довольно много адаптивных меню. В этом топике я решил сделать подборку наиболее стоящих и интересных из тех, что пришлось нам опробовать. Все адаптивные меню не похожи друг на друга и разработаны исключительно для определенных задач.
Итак. Вашему вниманию 5 адаптивных меню на все случаи жизни.
Смотрите также:
20 jQuery плагинов полноэкранного меню
20 слайд-панелей навигации для сайта
7 jQuery плагинов меню для Bootstrap
flexMenu
Это именно то меню, которое было так тяжело найти и функционал которого мы уже собирались начать писать.flexMenu — адаптивное меню, которое подойдет для сайтов с динамически изменяющейся шириной. Главная и уникальная его особенность — это добавление пункта «Еще» и перенос в его выпадающий список пунктов, которые не помещаются в ширину всей навигации. То есть, если мы будем смотреть на больших мониторах, увидим все пункты. Как только начнем сжимать окно браузера, появится в конце меню пункт «Еще» и в его выпадающий список будут динамически перемещаться пункты, которые не помещаются по мере сжатия окна. Таким образом, у нас получится адаптивное меню с фиксированной высотой и «играющей» шириной.
При работе с flexMenu мы столкнулись с одной проблемой. В нашем случае справа был логотип с float: left;, справа размещалось данное меню также с float: left; и справа с float: right; был еще один блок. При ресайзе окна браузера получалось, что блок справа перепрыгивал под меню, далее все это перепрыгивало под логотип и потом уже задействовался функционал сжатия меню. Как бороться с данной особенностью верстки, будет в последующих топиках. Следите за обновлениями. P.S В статье 10 лучших jQuery плагинов для работы с текстом мы публиковали плагин под названием TextTailor, который позволяет обрезать текст в зависимости от высоты родительского блока и убрать все, что не поместилось, под кат.
Отличный пример адаптивного меню навигации. При ресайзе окна браузера мы увидим, что пункты переходят друг под друга и выравниваются по ширине. Смотрится очень аккуратно. Самое главное, данное адаптивное меню будет отлично смотреться на мобильных устройствах и, что более преимущественно, оно удобно в использовании на девайсах с тач дисплеем.
Multi-level Flat Menu — адаптивная навигация
Multi-level Flat Menu — это адаптивное, многоуровневое менюMulti-level Flat Menu — отличный выбор, если вам требуется сэкономить место на странице.
SlickNav — адаптивное меню. На мобильных устройствах превращается в кнопку, при нажатии на которую выпадают пункты навигации поверх контента, который располагается ниже.
Напоследок хотел бы представить вам бесплатное решение адаптивного мегаменю. Навигацию Yamm 3 следует использовать с сеткой Bootstrap 3.
Простое адаптивное горизонтальное меню на CSS3 и jQuery
<nav>
<a href=»#»><i aria-hidden=»true»></i></a>
<div>
<ul>
<li><a href=»#»>item</a></li>
<li><a href=»#»>item</a></li>
<li><a href=»#»>item</a>
<ul>
<li><a href=»#»>item</a></li>
<li><a href=»#»>item</a></li>
<li><a href=»#»>item</a></li>
</ul>
</li>
<li><a href=»#»>item</a></li>
<li><a href=»#»>item</a>
<ul>
<li><a href=»#»>item</a></li>
<li><a href=»#»>item</a></li>
<li><a href=»#»>item</a></li>
</ul>
</li>
<li><a href=»#»>item</a></li>
</ul>
</div>
</nav>
<script>
$(«li»).has(«ul»).addClass(‘submenu’);
$(‘.submenu > a’).append(‘<span><i aria-hidden=»true»></i></span>’);
$(‘.submenu span’).click(function() {
$(this).next(‘#main-menu li > ul’).toggleClass(‘openDesktopSubMenu’);
});
$(‘.submenu a’).hover(function() {
$(this).next(‘#main-menu li > ul’).addClass(‘openDesktopSubMenu’);
}, function() {
$(this).next(‘#main-menu li > ul’).removeClass(‘openDesktopSubMenu’);
});
$(‘#main-menu li > ul’).hover(function() {
$(this).addClass(‘openDesktopSubMenu’);
}, function() {
$(this).removeClass(‘openDesktopSubMenu’);
});
var x = true;
$(‘#menuTrigger’).on(«click», function(e) {
e.preventDefault();
if (x) {
$(‘.menu-container’).stop().slideToggle(‘fast’);
x = false;
}
else {
$(‘.menu-container’).stop().slideToggle(‘fast’, function() {
$(‘.menu-container’).css(‘display’, »);
x = true;
})
}
});
</script>
Создание трехуровневого адаптивного выпадающего меню
.bold {
font-weight:;
}
/* — header — */
header{
background: url(../img/header-pattern-.png) repeat;
margin:0;
padding:0 0 20px;
position:relative;
z-index:0;
}
/* — menu — */
header .navigation {
float:right;
}
header ul.nav li {
border:none;
margin:0;
}
header ul.nav li a {
border:none;
font-weight:;
}
header ul.nav li ul {
z-index:0;
margin-top:20px;
}
header ul.nav li ul li ul {
margin:1px 0 0 1px;
}
header ul.nav li a i {
color:#fff;
}
.container,
.navbar-static-top .container{
width: px;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: «»;
}
.container:after {
clear: both;
}
.dropdown {
position: relative;
}
.nav {
margin-bottom: 20px;
margin-left: 0;
list-style: none;
}
.nav > li > a {
display: block;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
cursor: pointer;
}
.navbar .nav a:hover {
background:none;
}
.navbar .nav > .active > a,.navbar .nav > .active > a:hover {
font-weight:;
}
.navbar .nav > .active > a:active,.navbar .nav > .active > a:focus {
background:none;
outline:0;
font-weight:;
}
.navbar .nav li .dropdown-menu {
z-index:0;
}
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
}
.navbar .nav > li {
float: left;
}
.navbar .nav > li > a {
float: none;
padding: 10px 15px 10px;
color: #;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: #;
text-decoration: none;
background-color: transparent;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.);
}
.navbar .nav > li > .dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: »;
}
.navbar .nav > li > .dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: »;
}
.dropdown-menu {
*border-right-width: 0;
*border-bottom-width: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.dropdown-menu .dropdown i {
position:absolute;
right:0;
margin-top:3px;
padding-left:20px;
}
.dropdown-submenu > .dropdown-menu {
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
}
.navbar .nav {
border-right:none;
border-left:none;
}
.navbar .nav > li > a {
float: none;
font-size:13px;
margin-left:10px;
margin-right:0;
text-decoration: none;
text-shadow: none;
border-right:none;
border-left:none;
color: #fff;
border:2px solid transparent;
padding:4px 10px 4px 10px;
background-image: none;
background: none;
}
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
color: #dddddd;
background-color: none;
background-image: none;
background-repeat: repeat-x;
filter: none;
text-decoration: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border:2px solid #f2f;
padding:4px 10px 4px 10px;
background: #;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 0 1px #;
-webkit-box-shadow: inset 0 0 1px #;
box-shadow: inset 0 0 1px #;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #fff;
border:2px solid #f2f;
padding:4px 10px 4px 10px;
background-image: none;
background: #;
filter: none;
text-decoration: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 0 1px #;
-webkit-box-shadow: inset 0 0 1px #;
box-shadow: inset 0 0 1px #;
}
.navbar .nav > a i[class^=»icon-«]{
color:#fdfdfd;
}
ul.nav li.dropdown a {
z-index:0;
display:block;
}
ul.nav li.dropdown ul li ul.dropdown-menu {
margin-left:0px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
ul.nav li.dropdown ul li i {
margin-right:20px;
}
select.selectmenu {
display:none;
}
.dropdown-menu {
position: absolute;
top: %;
left: 0;
z-index: 0;
display: none;
float: left;
min-width: px;
padding: 0;
margin: 2px 0 0;
list-style: none;
background: #;
border: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border:2px solid #f2f;
border-top:none;
-webkit-background-clip: none;
-moz-background-clip: none;
background-clip: none;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.dropdown-menu li {
margin:0;
padding:0;
}
.dropdown-menu li a {
color: #ddd;
font-size:12px;
padding:10px 15px 10px 15px;
margin:0;
text-shadow:none;
border-bottom:1px solid #;
text-decoration:none;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #ffffff;
text-decoration: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-repeat: none;
filter:none;
}
.dropdown-menu .sub-menu-level1, .dropdown-menu .sub-menu-level2 {left:%;position:absolute;top:0;visibility:hidden;margin-top: 0;}
.dropdown-menu li:hover .sub-menu-level1 {visibility:visible;}
.dropdown-menu li li:hover .sub-menu-level2 {visibility:visible;}
Адаптивное горизонтальное многоуровневое меню на CSS3
<div>
<nav>
<ul>
<li>
<a href=»»>
<i></i>
<strong>Главная</strong>
<small>Описание страницы</small>
</a>
</li>
<li>
<a href=»»>
<i></i>
<strong>О нас</strong>
<small>Описание страницы</small>
</a>
</li>
<li>
<a href=»»>
<i></i>
<strong>Возможности</strong>
<small>Описание страницы</small>
</a>
</li>
<li>
<a href=»»>
<i></i>
<strong>Новости</strong>
<small>Описание страницы</small>
</a>
</li>
<li>
<a href=»»>
<i></i>
<strong>Блог</strong>
<small>Поболтаем?</small>
</a>
<ul>
<li><a href=»#»><i></i>Кто мы?</a></li>
<li>
<a href=»#»><i></i>Наша команда</a>
<ul>
<li><a href=»#»><i></i>Девка</a></li>
<li>
<a href=»#»><i></i>Парень</a>
<ul>
<li><a href=»#»><i></i>Обо мне</a></li>
<li><a href=»#»><i></i>Достижения</a></li>
</ul>
</li>
<li><a href=»#»><i></i>Девка #2</a></li>
</ul>
</li>
<li><a href=»#»><i></i>Награды</a></li>
<li><a href=»#»><i></i>Сертификаты</a></li>
</ul>
</li>
<li>
<a href=»»>
<i></i>
<strong>Портфолио</strong>
<small>Описание страницы</small>
</a>
</li>
<li>
<a href=»»>
<i></i>
<strong>Контакты</strong>
<small>Напишите нам</small>
</a>
</li>
<li>
<a>
<input type=»text» value=»поиск …»>
<button><i></i></button>
</a>
<a href=»»>
<i></i>
</a>
</li>
</ul>
</nav>
</div>