12 сен 2016
Горизонтальное адаптивное меню для сайта
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Горизонтальное адаптивное меню для сайта

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Горизонтальное адаптивное меню для сайта

В данном уроке мы рассмотрим пример создания замечательного и более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню - "три точки". Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.




Шаг 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;
}


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

Готово!

Скачивание файлов доступно только зарегистрированным пользователям









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.