Адаптивное меню для сайта

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

Для начала вам требуется иметь уже сверстанное меню. Предположим, что оно имеет такую структуру (на самом деле это неважно, важно только задать id="menu", более того, если оно у вас многоуровневое, то эти уровни также продолжат работать и тогда, когда мы его адаптируем).

<ul id="menu">
	<li><a href="#">Главная</a></li>
	<li><a href="#">Блог</a></li>
	<li><a href="#">Книги</a></li>
</ul>

Перед этим меню необходимо расположить следующие стили, файл со стилями и файл скрипта.

<style>
@media screen and (max-width: 40em) {
	.js #menu {
		display:none;
	}
	
	.js .slicknav_menu {
		display:block;
	}
}
</style>
<link rel="stylesheet" href="slicknav.css">
<script src="modernizr.min.js"></script>	

Файлы slicknav.css и modernizr.min.js можно скачать здесь - в этом архиве также и другой скрипт, который нам нужен - jquery.slicknav.js. Обратите внимание на вторую строку, точнее на число 40em - именно после этого значения и начнет появляться наше новое меню, а старое должно исчезнуть. После списка добавьте такой код:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src=".jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#menu').slicknav();
});
</script>

Вот, собственно, и все. Если у вас возникли какие-либо вопросы по адаптивному меню, то вы можете написать мне на почту up777up@yandex.ru или сразу в скайп up777up2 - можно решить любые проблемы по сайтам, расширить функциональность вашего блога или дополнить его скриптами, поправить верстку.