Делаем мобильное меню для сайта на CSS и jQuery

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

Демо

Будем делать выезжающее (боковое) мобильное меню и появляться оно будет справа по клику на иконку гамбургер и вместе с тем весь контент будет смещаться влево на ширину нашего меню. Итак, давайте набросаем шаблон.

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

<span class="span"></span>
  <div class="menu">
    <span class="close">+</span>
      <ul>
	<li>Пункт меню1</li>
	<li>Пункт меню2</li>
	<li>Пункт меню3</li>
	<li>Пункт меню4</li>
	<li>Пункт меню5</li>
       </ul>
  </div>
<div class="content">
  <p>Lorem ipsum dolor sit amet</p>	
</div>

Заготовка для нашего выдвижного мобильного меню готова. Давайте сделаем иконку (она же кнопка) гамбургер. У нее класс span.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.span {
    position: absolute;
    display: inline-block;
    width: 2.25em;
    height: 0.8em;
    border-top: 0.2em solid #fff;
    border-bottom: 0.2em solid #fff;
    top: 0px;
    right: 10px;
    cursor: pointer;
    transition: .5s
}
 
.span:before {
    content: "";
    position: absolute;
    top: 0.3em;
    left: 0px;
    width: 100%;
    border-top: 0.2em solid #fff;
}

Выглядит оно вот так:

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

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

.menu{
  width: 200px;
  height: auto;
  background: #756755;
  position: fixed;
  top: 0;
  right: -200px;
}
span.close{
  font-size: 30px;
  color: #ccc;
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
}

По умолчанию его не видно, оно смещено вправо за пределы видимости на 200px. Теперь самое интересное — скрипт мобильного меню, который позволяет волшебству случиться.

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

$(function(){			
 $('.span').click(function(){
  $(this).css('opacity', '0');
  $('.menu').animate({
   right: 0
});
  $('body').animate({
   right: 200
 });
});
$('span.close').click(function(){
 $('.span').css('opacity', '1');
 $('.menu').animate({
  right: '-200px'
});
 $('body').animate({
   right: 0
 });
});
});

Теперь по порядку. По нажатию на иконку происходит следующее:

Иконка становится полностью прозрачной -> меню выезжает справа -> тело сайта смещается влево. По нажатию на крестик — все то же самое, только наоборот. Надеюсь у вас получилось. Если не работает, пишите в комментариях, попробуем разобраться вместе.

Таким образом можно самостоятельно реализовать подобное меню на сайте WordPress, Joomla, Битрикс и любых других систем управления. В принципе, ничего сложного, если у вас есть минимальные навыки JS. Во всяком случае попробуйте, для практики будет полезно.