/ Скрипты / Адаптивная горизонтальная навигация

Адаптивная горизонтальная навигация

Автор: delux · Опубликовано 14.04.2016 · Обновлено 25.02.2019

Реализация адаптивной горизонтальной навигации по ширине окна браузера — HorizontalNav

Как реализовать:

1. Разметка html

<nav class="horizontal-nav full-width">
    <ul>
        <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>
</nav>

<ul>

<li><a href="#">Главная</a></li>

<li><a href="#">Работы</a></li>

<li><a href="#">Контакты</a></li>

</ul>

</nav>

2. Стили CSS

.horizontal-nav {
    background: #efefef;
    border-radius: 6px;
}
.horizontal-nav ul {
    background: #128F9A;
    float: left;
    text-align: center;
    border-radius: 6px;
    border: 1px solid #0e7079;
}
.horizontal-nav ul li {
    float: left;
    border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
    border-left: 0 none;
}
.horizontal-nav ul li a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    border-top: 1px solid rgba(255,255,255, 0.25);
    border-left: 1px solid rgba(255,255,255, 0.25);
}
.horizontal-nav ul li:first-child a {
    border-left: 0 none;
}
.horizontal-nav ul li a:hover {
    background: #12808a;
}
.horizontal-nav ul li:first-child a {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.horizontal-nav {

background: #efefef;

border-radius: 6px;

}

.horizontal-nav ul {

background: #128F9A;

float: left;

text-align: center;

border-radius: 6px;

border: 1px solid #0e7079;

}

.horizontal-nav ul li {

float: left;

border-left: 1px solid #0e7079;

}

.horizontal-nav ul li:first-child {

border-left: 0 none;

}

.horizontal-nav ul li a {

display: block;

padding: 10px 20px;

color: #fff;

border-top: 1px solid rgba(255,255,255, 0.25);

border-left: 1px solid rgba(255,255,255, 0.25);

}

.horizontal-nav ul li:first-child a {

border-left: 0 none;

}

.horizontal-nav ul li a:hover {

background: #12808a;

}

.horizontal-nav ul li:first-child a {

border-top-left-radius: 6px;

border-bottom-left-radius: 6px;

}

.horizontal-nav ul li:last-child a {

border-top-right-radius: 6px;

border-bottom-right-radius: 6px;

}

3. Подключаем в шапку сайта jQuery и javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.horizontalNav.js"></script>
<script>
    $(document).ready(function() {
        $('.full-width').horizontalNav();
    });
</script>

$(document).ready(function() {

$('.full-width').horizontalNav();

});

</script>

Список стандартных опций:

responsive:true, — автоматическая подстройка навигации при изменении размеров окна
responsiveDelay:100, — количество времени в мс, перед повторной поднастройкой навигации при изменении размеров окна
tableDisplay:true, — включение в современных браузерах display:table;, если установлено в false — то ширина элементов списка будет расчитываться вручную
minimumItems:0, — минимальное количество пунктов меню требуемое до автоматической регулировки ширины. 0 — всегда. Полезно для предотвращения появления огромных, одного или двух, пунктов меню

Готово!

Смотреть DEMO Скачать исходник