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

12 155

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

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



		<nav>
            <div class="wrapper">
             <div class="menuToggle">Меню</div>
            <ul class="menu clearfix">
                <li><a href="#">Главная</a></li>
                <li><a href="#">Страница1</a></li>
                <li><a href="#">Страница2</a></li>
                <li><a href="#">Страница3</a></li>
                <li><a href="#">О нас</a></li>
            </ul>
           </div>
        </nav>
        <section class="b-content">
            <div class="wrapper">
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis 
				 autem consequatur eum facere neque. Tenetur laboriosam 
				 repellendus neque fuga, velit, totam, est, aspernatur 
				 sunt sapiente earum quo beatae. Fuga, officia.
             </div>
         </section> 
		 

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


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

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

.menu li{
    float: left;
}
.menu li a{
  display: inline-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;
}
body{
    height: 100%;
}
@media( max-width: 640px){
    .menuToggle{
        display: block;
    }
    .menu{
        display: none;
        position: absolute;
        background: #3e2597;
        width: 100%;
        margin-left: -10px;
        padding-left: 10px;
    }
    .menu li{
        float: none;
    }
}

Добавление JS

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


$(function(){

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

    });

});

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

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

Заключение

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

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

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