В данном уроке мы рассмотрим пример создания замечательного и более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню - "три точки". Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
Шаг 1. HTML<div class="wrapper"><nav>
<div class="container">
<ul id="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>
<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 class="more">
<span>...</span>
<ul id="overflow">
</ul>
</li>
</ul>
</div>
</nav>
</div>
Шаг 2. jQueryПодключаем jQuery - его можно поместить как в сам шаблон, так и в отдельный файл.
window.onresize = navigationResize;
navigationResize();
function navigationResize() {
$('#nav li.more').before($('#overflow > li'));
var navItemMore = $('#nav > li.more'),
navItems = $('#nav > li:not(.more)'),
navItemWidth = navItemMore.width(),
windowWidth = $('#nav').parent().width(),
navOverflowWidth;
navItems.each(function(){
navItemWidth += $(this).width();
});
navItemWidth > windowWidth ? navItemMore.show() : navItemMore.hide();
while (navItemWidth > windowWidth) {
navItemWidth -= navItems.last().width();
navItems.last().prependTo('#overflow');
navItems.splice(-1,1);
}
navOverflowWidth = $('#overflow').width();
}
Шаг 3. CSSЕсть особенность в меню - размер должен быть в пикселях, а не %
*,*:before,*:after{
box-sizing: border-box;
}
.container{
width: 1170px;
padding: 0 15px;
margin:auto;
}
@media (max-width: 1200px){
.container{
width: 970px;
}
}
@media (max-width: 992px){
.container{
width: 750px;
}
}
@media (max-width: 768px){
.container{
width: 450px;
}
}
@media (max-width: 480px){
.container{
width: 300px;
}
}
.container:before,
.container:after {
content: "";
display: table;
}
.container:after{
clear:both;
}
nav {
background: #2196F3;
}
nav ul {
margin: 0;
padding:0;
list-style: none;
}
nav ul li {
float: left;
position:relative;
}
nav ul li.more span{
display:block;
}
nav ul li.more {
width: 3em;
text-align: center;
display: none;
}
nav ul li.more:hover ul#overflow {
opacity: 1;
visibility: visible;
}
nav ul li a,
nav ul li span {
display: block;
background: #2196F3;
color: #fff;
text-decoration: none;
padding: 1em;
cursor: pointer;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
nav ul li a:hover,
nav ul li span:hover {
background: #64B5F6;
}
nav #overflow {
opacity: 0;
visibility: hidden;
position: absolute;
right: 0;
z-index:10;
text-align: left;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
nav #overflow li {
float: none;
}
nav #overflow li a {
background: #2196F3;
white-space: nowrap;
}
nav #overflow li a:hover {
background: #64B5F6;
}
В результате мы получили горизонтальное адаптивное меню, которое дополнит Ваш ресурс новыми красками и функциональностью.
Готово!Скачивание файлов доступно только зарегистрированным пользователям