Владислав Калачев

Быстрое создание «гамбургер» меню на jQuery

20 927

Доброго времени суток, друзья. Сегодня хочу продолжить тему мобильных меню и предложить вам сделать тоже меню, но только используя jQuery. Поехали.

Подробное видео на эту тему.

Создание HTML макета


        <nav>
            <div class="wrapper">
                <div class="menuToggle icon">
                    <div class="hamburger"></div>
                </div>
                
                <ul class="menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Page1</a></li>
                    <li><a href="#">Page2</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
        </nav>
        <section>
            <div class="wrapper">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti facere quia tempore aliquid, modi numquam voluptates quibusdam odit cum magni, distinctio sit inventore nisi cupiditate quidem ducimus dolores voluptate consectetur.
            </div>
        </section>

Добавление основных CSS стилей


html, body, section {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  height: 100%;
}

nav{
  background: #3e2597;
  padding: 0;
  margin: 0;
}

.menu{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu li{
  display: inline-block;
}

.menu li a{
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
}

.wrapper{
  max-width: 1024px;
  padding: 10px;
  margin: 0px auto;
}

.menuToggle{  
    color: #fff;
    padding: 10px 15px;
    cursor: pointer;
    display: none;
}

@media( max-width: 640px){
    .menuToggle{
        display: block;
    }
    .menu{
        display: none;
        position: absolute;
        background: #3e2597;
        width: 100%;
        margin-left: -10px;
        padding-left: 10px;
    }
    .menu li{
        display: block;
    }
}

.icon {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.hamburger {
    width: 40px;
    height: 4px;
    transform: translate(-50%, -50%);
    background: #fff;
    transition: 0.5s;
    display: inline-block;
    margin-left: 12px;
}

.hamburger:before,
.hamburger:after {
    content: "";
    width: 40px;
    height: 4px;
    position: absolute;
    background: #fff;
    transition: 0.5s;
}

.hamburger:before {
    top: -16px;
}

.hamburger:after {
    top: 16px;
}

.icon.active .hamburger {
    background: rgba(0, 0, 0, 0);
}

.icon.active .hamburger:before {
    top: 0;
    transform: rotate(45deg);
}

.icon.active .hamburger:after {
    top: 0;
    transform: rotate(135deg);
}

Добавление JS

После того как мы сверстали само меню нам понадобиртся подключить JS файл и приступить к самому интересному.


$(document).ready(function() {
  $(".menuToggle").click(function() {
    $(this).toggleClass("active");
    $('.menu').slideToggle(300, function(){
      if($(this).css('display') === "none"){
        $(this).removeAttr('style');
      }
    });
  });
});

Давайте подробнее рассмотрим что тут написна. В начале мы вешаем собитые .on по клику на самоу кнопку «Меню». В нутри этого события мы добовляем на $(«.menu») выподающее меню функцию slideToggle() которая будет производить плавное открытие и закрытие выподающего меню.

Есть небольшая проблема которая у нас возникнет при переходе версий сайта и нажитие на кнопку «Меню», а именно будет скрываться блок с самими пунктами меню т.к. по умолчанию  функция slideToggle() при закрытие добавляет атребут «display: none». Что бы исправить этот баг нужно вызвать колбэк(функция которая будет вызыватся после отработки основной функции) для функции slideToggle() . В нутри колбека мы пишем условие. Если у нас атрибу в блоке меню равен «display: none» тогда мы удаляем этрибут «style».

Заключение

Вот так отчень просто и быстро мы создали адаптивно меню «гамбургер» которое вы можете лекго использовать в смоих проектах. Тут вы можете скачать исходники. С вами был Corvax. Да новых встреч!

Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.

Комментарии:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *