Мобильное меню Jquery

Jquery



//плавный скрол меню
$(document).ready(function () {
    // Обработчик кликов на ссылки с якорем и классом "btn-scroll"
    $(".menu-smg a[href^='#']").click(function (event) {
        var elementClick = $(this).attr("href");
        var destination;

        // Проверяем, находимся ли мы на текущей странице или на другой странице
        if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
            // Мы на главной странице, выполняем плавный скроллинг вниз
            destination = $(elementClick).offset().top;
            $('html, body').animate({
                scrollTop: destination
            }, 1100);
        } else {
            // Мы на другой странице, переходим на главную страницу с якорем в URL
            destination = window.location.origin + '/#' + elementClick.substr(1);
            window.location.href = destination;
        }

        return false;
    });
});
//плавный скрол меню

//мобильное меню
(function(){
    $(document).ready(function(){
        $('.btn-menu').click(function (e) {
            $(this).toggleClass('active');
        });
        if (window.screen.width <= 1000) {
            $('.menu-animate-mobile a').click(function (e) {
                $('.btn-menu').toggleClass('active');
                $('.menu-animate-mobile').slideToggle();
            });
        }
    });
})();
//мобильное меню

//смена класса btn mobile menu
(function(){
    if(window.screen.width<=982){
        $(document).ready(function(){
            $('.btn-menu').click(function (e) {
                $(this).toggleClass('active');
            });
        });
    }
})();
//смена класса btn mobile menu

HTML

<div class="menu-smg">
    <a class="btn-menu">
        <div class="icon">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </a>
    <div class="menu-animate-mobile">
        <?php wp_nav_menu([ 'theme_location'  => 'custom-menu' ]); ?>
    </div>
</div>

LESS

.menu-smg{
    .btn-menu{
        display: none;
        text-decoration: none;
        text-align: center;
        color: #fff;

        @media (max-width: 724px){
            display: block;
        }
        .icon{
            display: inline-block;
            vertical-align: middle;
            padding: 10px;
            padding-top: 12px;
            border-radius: 50%;
            background: @color-1;
            height: 23px;
            width: 25px;
            position: relative;

            span{
                display: block;
                width: 25px;
                height: 2px;
                background: #fff;
                margin: 4px 0;
                transition: 0.3s all;
            }
        }
    }
    .active{
        .icon{
            span{
                position: absolute;

                &:nth-child(1){
                    transform: rotate(45deg);
                    top: 17px;
                }
                &:nth-child(2){
                    opacity: 0;
                }
                &:nth-child(3){
                    transform: rotate(-45deg);
                    top: 17px;
                }
            }
        }
    }
    .menu-animate-mobile{
        @media (max-width: 724px){
            display: none;
            position: absolute;
            top: 110px;
            background: #1b1f2a;
            padding: 20px 0;
            left: 0;
            width: 100%;
            z-index: 2;
        }
    }
    ul{
        padding: 0;
        margin: 0;

        li{
            list-style: none;
            display: inline-block;
            vertical-align: text-top;

            @media (max-width: 724px){
                display: block;
                text-align: center;
            }
            a{
                display: block;
                text-decoration: none;
                padding: 20px 25px;
                transition: 0.3s all;
                color: #000;
                position: relative;

                @media (max-width: 724px){
                    padding: 15px;
                }
                &:hover{
                    &::before{
                        left: 25px;
                        right: 25px;
                        opacity: 1;

                        @media (max-width: 724px){
                            right: 40%;
                            left: 40%;
                        }
                    }
                }
                &::before{
                    content: '';
                    position: absolute;
                    left: 50%;
                    right: 50%;
                    height: 3px;
                    border-radius: 2px;
                    bottom: 0;
                    background: @color-1;
                    opacity: 0;
                    transition: 0.5s all;

                    @media (max-width: 724px){
                        bottom: 5px;
                    }
                }
            }
        }
        .current_page_item {
            a{
                color: @color-1;
            }
        }
    }
}

function.php

//меню
if ( function_exists( 'register_nav_menus' ) )
{
	register_nav_menus(
		array(
			'custom-menu'=>__('Главное меню'),
			'footer-menu'=>__('Нижнее меню'),
		)
	);
}
Контакты

Работаем: с ПН по ПТ, с 08:00 до 17:00 (МСК)
Отдыхаем: в СБ и ВС, чтобы быть в тонусе
и реализовывать самые сложные идеи