Адаптируем меню под мобильные устройства

Всем привет! В предыдущей статье я показывал как сделать мобильное меню для сайта. Теперь пришло время выяснить как адаптировать обычное горизонтальное меню под маленькие разрешения экрана. В частности для планшетов и смартфонов. Помогут нам в этом CSS3 и медиа-запросы.

Демо

Итак, давайте представим, что у нас уже есть меню и нам нужно, чтобы оно было адаптированным. А пока, при уменьшении окна браузера, верстка начинает разъезжаться, что приводит в ужас моего внутреннего эстета.

Для начала нужно определить точку (ширину экрана), при достижении которой наше меню будет меняться на мобильное. Можно сразу установить max-width: 768px (именно такое разрешение имеют большинство  популярных планшетов), но в моем случае смотрится довольно неплохо, поэтому постараемся вручную найти значение, при котором наш шаблон будет «ломаться». И это место находится на 593px. Теперь нужно написать CSS код для меню, которое мы собираемся адаптировать.

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

1
2
3
4
5
6
7
8
9
10

<ul class="mobile">
 <span>+</span>
  <li>О нас</li>
  <li>Услуги</li>
  <li>Цены</li>
  <li>Отзывы</li>
  <li>Контакты</li>
 </ul>	
 <span class="hamb">☰</span>
<span class="overlay"></span>

1
2
3
4

}
.mobile span, .hamb{
 display: none;
}

Код адаптивного меню

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
40

@media(max-width: 593px){
	.mobile{
		width: 250px;
		height: 100vh;
		background: #333;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: -250px;
		padding: 15px;
		font-size: 25px;
		z-index: 2;
		color: #fff;
 
	}
 
	.mobile li{
		margin-bottom: 20px;
	}
	.mobile li:last-child{
		margin-bottom: 0px;
	}
	.mobile span{
		display: block;
		position: absolute;
		top: -5px;
		right: 10px;
		font-size: 40px;
		transform: rotate(45deg);
		color: #fff;
	}
	.hamb{
	display: block;
	font-size: 35px;
}

Проверяем на адаптив. Вроде не плохо. Теперь осталось добавить совсем немного jQuery, чтобы окончательно оживить наше меню. Код будет примерно таким же, как в прошлом уроке.  Итоговый результат смотрите на демо страничке.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(function(){
  $('.hamb').click(function(){
    $('.mobile').animate({
	right: 0
    });
$(this).hide();
 $('.overlay').fadeIn();
});
$('.mobile span, .overlay').click(function(){
  $('.mobile').animate({
	right: -250
  });
$('.hamb').show();
$('.overlay').fadeOut();
});
});

На этом все. В завершении проверяем страницу через адаптиватор. Пишите в комментариях свои мысли по этому поводу.