Длинное адаптивное меню с автоматическим пунктом ещё на JavaScript
Часто сталкивались с ситуацией, когда длинное меню не влезает по ширине блока и приходится придумывать различные пути обхода? Сейчас разберем, как этого избежать с помощью простого скрипта, который добавляет в меню пункт «ещё» с подменю, куда попадут непоместившиеся разделы меню.
Для реализации необходимо загрузить скрипт keengo.moreNav.js и подключить его после jQuery. Далее оформляем меню в соответствии со стилями вашего сайта и присваиваем тегу <ul> уникальный id или class, который будет использоваться в js. Затем просто подключаем скрипт к вашему меню таким скриптом: $('#more-nav').moreNav();
Меню будет работать при загрузке и при изменении размеров экрана, то есть пункты будут автоматически переформировываться в подменю «ещё» в зависимости от ширины меню. Попробуйте изменить размер окна браузера, чтобы увидеть, как изменится меню.
HTML
<ul id="more-nav">
<li>
<a href="#">Телевизоры</a>
</li>
<li>
<a href="#">Аудио-видео</a>
</li>
<li>
<a href="#">Компьютеры</a>
</li>
<li>
<a href="#">Смартфоны</a>
</li>
<li>
<a href="#">Планшеты</a>
</li>
<li>
<a href="#">Фото и видео</a>
</li>
<li>
<a href="#">Техника для кухни</a>
</li>
<li>
<a href="#">Бытовая техника</a>
</li>
<li>
<a href="#">Красота и здоровье</a>
</li>
<li>
<a href="#">Для автомобилей</a>
</li>
<li>
<a href="#">Игры</a>
</li>
<li>
<a href="#">Аксессуары</a>
</li>
</ul>CSS
#more-nav {
display: block;
position: relative;
z-index: 500;
list-style: none;
margin: 0;
padding: 0;
border-bottom: #EEE solid 1px;
}
#more-nav:after {
content: '';
display: table;
clear: both;
}
#more-nav > li {
display: block;
position: relative;
float: left;
}
#more-nav > li a {
display: block;
white-space: nowrap;
padding: 10px 25px;
color: #333;
font-weight: 700;
text-decoration: none;
}
#more-nav > li:hover > a,
#more-nav > li a:hover {
background: #ffffff;
}
#more-nav > li > ul {
display: block;
position: absolute;
background: #FFF;
top: 100%;
right: 0;
list-style: none;
margin: 0;
padding: 0;
border: #EEE solid 1px;
border-top: none;
margin-top: -1px;
opacity: 0;
visibility: hidden;
}
#more-nav > li:hover > ul {
opacity: 1;
visibility: visible;
}JS
$('#more-nav').moreNav();