1

https://jsfiddle.net/sunsexsurf/gw3185to/6/

не работает клик при нажатии на значок бургер-меню

html

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
<!--    адаптив-->
    <meta name="viewport" content="width=device-width">
<!--    <meta http-equiv="X-UA-Compatible" content="ie=edge">-->

    <link href="../static/css/base_template.css" rel="stylesheet">

    <title>
        {%block title%}
        {%endblock title%}
    </title>


</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="../static/js/header_burger.js"></script>
<div class="wrapper">
    <header class="header">
        <div class="container">
            <div class="header__body">
                <div class="header__burger">
                    <span></span>
                </div>
                <nav class="header__menu">
                    <ul class="header__list">
                        <li>
                            <a href="" class="header__link">На главную</a>
                        </li>
                        <li>
                            <a href="" class="header__link">Банки</a>
                        </li>
                        <li>
                            <a href="" class="header__link">Памятка о монете</a>
                        </li>
                        <li>
                            <a href="" class="header__link">О проекте</a>
                         </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <div class="content">
        <div class="container">
            <div class="content__text">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                </p>

            </div>
        </div>


    </div>

</div>

        {%block page%}
        {%endblock%}


<div class="footer">
    <p>Москва, <script> document.write(new Date().toLocaleDateString()); </script> </p>
</div>


</body>


</html>

css

html, body{
    height: 100%;
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


.wrapper{}

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

/* меню */
.header{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 50;
}

/*создаем плашку*/
.header:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4fcff;
    z-index: 2;
}

.header__body{
    position: relative;
    display: flex;
    /*justify-content: space-between;*/
    justify-content: right;
    height: 80px;
    align-items: center;
    /*align-self: center;*/
    margin-left: 40px;
}
.header__burger{
    /* скрываем меню для всего, на чем не будет триггерить медиа-запрос */
    display: none;
}
.header__menu{
}


.header__list{
    display: flex;
    position: relative;
    z-index: 2;
}
.header__list li{
    list-style: none;
    margin: 0px 0px 0px 30px
}

.header__link{
    text-transform: uppercase;
    color: #128f76;
    font-size: 18px;
    text-decoration: none;
}



/* все, что меньше 768px - это мобильные устройста, для них будем прятать меню в бургер */
@media (max-width: 767px){

    body.lock{
        overflow: hidden;
    }

    .header__body{
        height: 50px;
    }
    .header__burger{
        display: block;
        position: relative;
        width: 30px;
        height: 20px;
        z-index: 3;
    }
    .header__burger span{
        /* отвечает за центральную черточку */
        background-color: #128f76;
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        top: 9px;
        transition: all 0.3s ease 0s;
    }

    .header__burger:before,
    .header__burger:after{
        content: '';
        /* background color - цвет линии */
        background-color: #128f76;
        position: absolute;
        width: 100%;
        height: 2px;
        left: 0;
        transition: all 0.3s ease 0s;
    }
    .header__burger:before{
        top: 0;
    }
    .header__burger:after{
        bottom: 0;
    }
    .header__burger.active:before{
        transform: rotate(45deg);
        top: 9px;
    }
    .header__burger.active:after{
        transform: rotate(-45deg);
        bottom: 9px;
    }
    .header__burger.active span{
        transform: scale(0);
    }


    .header__menu{
        position: fixed;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        transition: all 0.3s ease 0s;
        background-color: #1d6fa5;
        /*z-index: 2;*/
        padding: 70px, 10px, 20px, 10px;
    }
    .header__menu.active{
        top: 0;
    }

    .header__list {
        display: none;
    }
    .header__list li{
        margin: 0px,0px, 20px,0px;
    }
    .header__list{
        font-size: 24px;
    }


/*    контент в media */
    .content{
    /* padding больше чем 80px в header__body */
    padding: 70px 0px 0px 0px;
}


}


/* контент */


.content{
    /* padding больше чем 80px в header__body */
    padding: 100px;
}
.content__text{
    font-size: 18px;
    line-height: 25px;
}
.content__text p{
    margin: 0px 0px 20px 0px;

}

JS

$(document).ready(function () {
    $('.header__burger').click(function (event) {
        $('.header__burger', 'header__menu').toggleClass('active');
        $('body').toggleClass('lock');
    })
})

1 ответ 1

1

Замените JS

$(document).ready(function () {
    $('.header__burger').click(function (event) {
        $('.header__menu, .header__burger').toggleClass('active');
        $('body').toggleClass('lock');
    })
})
/*
небольшое увеличение картинки при наведении


.element {
transform: scale(1);
transition: transform 300ms;
}

.element:hover {
 transform: scale(1.5);
}*/


html, body{
    height: 100%;
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


.wrapper{}

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

/* меню */
.header{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 50;
}

/*создаем плашку*/
.header:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4fcff;
    z-index: 2;
}

.header__body{
    position: relative;
    display: flex;
    /*justify-content: space-between;*/
    justify-content: right;
    height: 80px;
    align-items: center;
    /*align-self: center;*/
    margin-left: 40px;
}
.header__burger{
    /* скрываем меню для всего, на чем не будет триггерить медиа-запрос */
    display: none;
}
.header__menu{
}


.header__list{
    display: flex;
    position: relative;
    z-index: 2;
}
.header__list li{
    list-style: none;
    margin: 0px 0px 0px 30px
}

.header__link{
    text-transform: uppercase;
    color: #128f76;
    font-size: 18px;
    text-decoration: none;
}



/* все, что меньше 768px - это мобильные устройста, для них будем прятать меню в бургер */
@media (max-width: 767px){

    body.lock{
        overflow: hidden;
    }

    .header__body{
        height: 50px;
    }
    .header__burger{
        display: block;
        position: relative;
        width: 30px;
        height: 20px;
        z-index: 3;
    }
    .header__burger span{
        /* отвечает за центральную черточку */
        background-color: #128f76;
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        top: 9px;
        transition: all 0.3s ease 0s;
    }

    .header__burger:before,
    .header__burger:after{
        content: '';
        /* background color - цвет линии */
        background-color: #128f76;
        position: absolute;
        width: 100%;
        height: 2px;
        left: 0;
        transition: all 0.3s ease 0s;
    }
    .header__burger:before{
        top: 0;
    }
    .header__burger:after{
        bottom: 0;
    }
    .header__burger.active:before{
        transform: rotate(45deg);
        top: 9px;
    }
    .header__burger.active:after{
        transform: rotate(-45deg);
        bottom: 9px;
    }
    .header__burger.active span{
        transform: scale(0);
    }


    .header__menu{
        position: fixed;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        transition: all 0.3s ease 0s;
        background-color: #1d6fa5;
        /*z-index: 2;*/
        padding: 70px, 10px, 20px, 10px;
    }
    .header__menu.active{
        top: 0;
    }

    .header__list {
        display: none;
    }
    .header__list li{
        margin: 0px,0px, 20px,0px;
    }
    .header__list{
        font-size: 24px;
    }


/*    контент в media */
    .content{
    /* padding больше чем 80px в header__body */
    padding: 70px 0px 0px 0px;
}


}


/* контент */


.content{
    /* padding больше чем 80px в header__body */
    padding: 100px;
}
.content__text{
    font-size: 18px;
    line-height: 25px;
}
.content__text p{
    margin: 0px 0px 20px 0px;

}
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
<!--    адаптив-->
    <meta name="viewport" content="width=device-width">
<!--    <meta http-equiv="X-UA-Compatible" content="ie=edge">-->

    <link href="../static/css/base_template.css" rel="stylesheet">

    <title>
        {%block title%}
        {%endblock title%}
    </title>


</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="../static/js/header_burger.js"></script>
<div class="wrapper">
    <header class="header">
        <div class="container">
            <div class="header__body">
                <div class="header__burger">
                    <span></span>
                </div>
                <nav class="header__menu">
                    <ul class="header__list">
                        <li>
                            <a href="" class="header__link">На главную</a>
                        </li>
                        <li>
                            <a href="" class="header__link">Банки</a>
                        </li>
                        <li>
                            <a href="" class="header__link">Памятка о монете</a>
                        </li>
                        <li>
                            <a href="" class="header__link">О проекте</a>
                         </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <div class="content">
        <div class="container">
            <div class="content__text">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis delectus, dicta, enim harum laborum minima nobis non numquam quidem ratione repudiandae, sit temporibus? Architecto ea nostrum quas recusandae tempore.
                </p>

            </div>
        </div>


    </div>

</div>

        {%block page%}
        {%endblock%}


<div class="footer">
    <p>Москва, <script> document.write(new Date().toLocaleDateString()); </script> </p>
</div>


</body>


</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.