Скучное меню делает сайт незаметным, неинтересным и безликим. Чтобы этого не случилось с вашим продуктом, я научу вас нескольким приемам.
В этом уроке я покажу возможность замены обычного меню совершенно новым любопытным вариантом, который на сегодняшний день уже является адаптированным.
Скачать адаптивное меню вы можете по ссылке ниже:
Добавляем HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<header> <nav class="cd-main-nav-wrapper"> <ul class="cd-main-nav"> <li><a href="#0">О нас</a></li> <li><a href="#0">Проекты</a></li> <li><a href="#0">Блог</a></li> <li><a href="#0">Контакты</a></li> <li> <a href="#0" class="cd-subnav-trigger"><span>Категории</span></a> <ul> <li class="go-back"><a href="#0">Меню</a></li> <li><a href="#0">Категория 1</a></li> <li><a href="#0">Категория 2</a></li> <li><a href="#0">Категория 3</a></li> <li><a href="#0">Категория 4</a></li> <li><a href="#0">Категория 5</a></li> <li><a href="#0" class="placeholder">Placeholder</a></li> </ul> </li> </ul> <!-- .cd-main-nav --> </nav> <!-- .cd-main-nav-wrapper --> <a href="#0" class="cd-nav-trigger">Menu<span></span></a> </header> |
В навигации у нас есть два простых списка. Разрабатывая свои варианты меню, вы заменяете имена разделов и категорий.
|
1 |
<a href="#0" class="cd-nav-trigger">Menu<span></span></a> |
За навигацию при небольшом разрешении отвечает последняя строчка.
Добавляем CSS
В примере с файлом style.css есть раздел под названием «Стили для меню». Там приведены все возможные варианты. Если хотите, скачайте весь файл целиком, не хотите, можете взять исключительно стили. Файл включается в html между тегами <head>.
|
1 |
<link rel="stylesheet" href="css/style.css"> |
Добавляем JQuery
Берем в архиве папку js. Включаем в html скрипты.
|
1 2 3 |
<script src="js/modernizr.js"></script> <script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script> |
Этого делать не придется, если вы уже применили modernizr.js и jquery-2.1.1.js.
Вы сами видите, что предлагаемый метод прост и понятен, а результат его применения интересен и оригинален. Точно также можно оформить поиск в сайте, ссылки на социальные сети и страницы входа.
Залишити відповідь