Адаптивная горизонтальная навигация
Реализация адаптивной горизонтальной навигации по ширине окна браузера — HorizontalNav
Как реализовать:
1. Разметка html
|
1 2 3 4 5 6 7 8 9 |
<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> |
2. Стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.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
|
1 2 3 4 5 6 7 |
<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> |
Список стандартных опций:
responsive:true, — автоматическая подстройка навигации при изменении размеров окна
responsiveDelay:100, — количество времени в мс, перед повторной поднастройкой навигации при изменении размеров окна
tableDisplay:true, — включение в современных браузерах display:table;, если установлено в false — то ширина элементов списка будет расчитываться вручную
minimumItems:0, — минимальное количество пунктов меню требуемое до автоматической регулировки ширины. 0 — всегда. Полезно для предотвращения появления огромных, одного или двух, пунктов меню
responsiveDelay:100, — количество времени в мс, перед повторной поднастройкой навигации при изменении размеров окна
tableDisplay:true, — включение в современных браузерах display:table;, если установлено в false — то ширина элементов списка будет расчитываться вручную
minimumItems:0, — минимальное количество пунктов меню требуемое до автоматической регулировки ширины. 0 — всегда. Полезно для предотвращения появления огромных, одного или двух, пунктов меню
Готово!
