Простейшее адаптивное меню

В сегодняшней заметке речь пойдёт о том, как создать простейшее адаптивное меню. Не претендую на звание лучшего варианта (если вам известен более удобный и простой метод, поделитесь, пожалуйста, в комментариях).

Что такое адаптивное меню и зачем оно нужно? Применяется оно на сайтах с адаптивным дизайном. Это тот, который подстраивается под параметры устройства, с которого просматривается. Примером служит мой блог о дизайне. Можете проследить за его поведением, изменяя размер окна браузера. Или зайдите на сайт с телефона и компьютера.

Если у нас большой монитор, то меню отображается списком из кнопок. Если устройство с маленьким экраном и/или разрешением, меню состоит из одной кнопки, нажав на которую открывается то же самое, полноценное, меню.

Разные источники предлагают и разные решения. Одно из наиболее популярных – сделать два одинаковых блока навигации, а отображать уже тот, который требуется по ситуации.

Мне такой подход не нравится. На то она и адаптивность, чтобы менять визуальное отображение элемента, а не заменять его аналогичным.

Что нам понадобится? Кнопка и меню, которое будет отображаться при её нажатии.

Демо

В виде html-разметки это всё будет выглядеть следующим образом:

1
2
3
4
5
6
7
8
9
<span class="open_menu" title="Меню">Меню</span>
<nav class="top_menu">
<ul>
<li><a href="http://naykris.com/uslugi-i-ceny/">Услуги</a></li>
<li><a href="http://naykris.com/kontakti/">Контакты</a></li>
<li><a>Реклама на Блоге</a></li>
<li><a href="http://naykris.com/o-sebe/">О Себе</a></li>
</ul>
</nav>
<span class="open_menu" title="Меню">Меню</span>
<nav class="top_menu">
<ul>
<li><a href="http://naykris.com/uslugi-i-ceny/">Услуги</a></li>
<li><a href="http://naykris.com/kontakti/">Контакты</a></li>
<li><a>Реклама на Блоге</a></li>
<li><a href="http://naykris.com/o-sebe/">О Себе</a></li>
</ul>
</nav>

Чтобы предать соответствующий вид, добавим каскадные стили нашим элементам

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    .open_menu {
    float: left;
    background: #9B80CE;
    color: #fff;
    cursor: pointer;
    font-size: 2em;
    padding: .5em;
    margin-left: .5em;
    }
 
    .top_menu ul {
    float: left;
    list-style: none;
    margin: 0 .125em;
    padding: 0;
    }
    .top_menu a {
    background: #9B80CE;
    color: #fff;
    display: block;
    margin-bottom: .125em;
    padding: 1em;
    }
    .open_menu {
    float: left;
	background: #9B80CE;
	color: #fff;
	cursor: pointer;
	font-size: 2em;
	padding: .5em;
	margin-left: .5em;
	}
	.top_menu ul {
	float: left;
	list-style: none;
	margin: 0 .125em;
	padding: 0;
	}
	.top_menu a {
	background: #9B80CE;
	color: #fff;
	display: block;
	margin-bottom: .125em;
	padding: 1em;
	}

Теперь нам нужно чтобы блок <nav></nav> был скрыт и показывался только при нажатии на кнопку «Меню». Для этого скрываем блок с навигацией, добавив в стили параметр display:none

1
2
3
.top_menu {
    display:none;
    }
.top_menu {
	display:none;
	}

А чтобы заработала кнопка «Меню», добавим небольшой jQuery-код:

1
2
3
4
5
6
7
8
<script>
  $(document).ready(function(){
    $(".open_menu").click(function(){
        $(".top_menu").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
  </script>
<script>
  $(document).ready(function(){
    $(".open_menu").click(function(){
		$(".top_menu").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
});
  </script>

Чтобы код заработал, нужно подключить библиотеку jQuery. Есть разные варианты (и мнения о каждом из них). Один из простейших, им и воспользуемся, подключить библиотеку с Гугла. Между тегами <head></head> вставьте такую строчку:

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Вот, собственно, и всё. Теперь, при нажатии на кнопку «Меню», наша навигация плавно появляется и исчезает.

Осталось сделать так, чтобы кнопка «Меню» не отображалась на больших дисплеях, а навигация сразу показывалась в нужном виде.
Достаточно добавить css-код и всё готово.

1
2
3
4
5
6
7
8
9
10
11
12
13
@media screen and (min-width: 63.75em){
    .top_menu {
    display: block;
    margin-top: 1.25em;
    }
 
    .top_menu ul li {
    display: inline-block;
    }
     .open_menu {
     display: none;
    }
}
@media screen and (min-width: 63.75em){
	.top_menu {
	display: block;
	margin-top: 1.25em;
	}
	.top_menu ul li {
	display: inline-block;
	}
	 .open_menu {
	 display: none;
	}
}

Надеюсь, данная шпаргалка будет вам полезна.

Творите хорошее. С уважением, Найкрис.

Смотрите ещё