На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

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


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

Для начала вам требуется иметь уже сверстанное меню. Предположим, что оно имеет такую структуру (на самом деле это неважно, важно только задать 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 - можно решить любые проблемы по сайтам, расширить функциональность вашего блога или дополнить его скриптами, поправить верстку.




тегизаметки, javascript, скрипты, сайтостроительство





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




3 метода подключения к MySQL с PHP с примерами кода
Программа "Новогодняя ёлочка"


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.