@holmssherlok0808
Умею практически все!Кроме того как фиксить баги)

Как исправить проблему с меню бургер?

Здравствуйте! Делал так сказать тестовою работу и столкнулся с проблемой... Меню бургер не скролится... Прокрутку тела я запретил. А вот разрешить скролится меню не могу... Вот github . И еще ко ниже. Помогите пожалуйста!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>FILM</title>
</head>
<body>
    <header class="header">
        <div class="header__container">
            <div class="header__logo">FILMS</div>
            <div class="header__menu">
                <a href="#" class="header__link">Фильмы</a>
                <div class="header__film_popup">
                    <a href="#" class="header__film_link">Боевики</a>
                    <a href="#" class="header__film_link">Фантастика</a>
                    <a href="#" class="header__film_link">Комедии</a>
                    <a href="#" class="header__film_link">Семейные</a>
                </div>
                <a href="#" class="header__link">Аниме</a>
                <a href="#" class="header__link">Мультфильмы</a>
            </div>
            <div class="header__burger">
                <span class="burger__line"></span>
                <span class="burger__line"></span>
                <span class="burger__line"></span>
            </div>
        </div>

    </header>
                <div class="burger__menu">
        <div class="burger__inner">
            <a href="#" class="burger__link _film">Фильмы</a>
                <div class="burger__film_popup">
                    <a href="#" class="burger__film_link">Боевики</a>
                    <a href="#" class="burger__film_link">Фантастика</a>
                    <a href="#" class="burger__film_link">Комедии</a>
                    <a href="#" class="burger__film_link">Семейные</a>
                </div>
                <a href="#" class="burger__link">Аниме</a>
                <a href="#" class="burger__link">Мультфильмы</a>
        </div>
    </div>


  
    <script src="js/app.js"></script>
</body>
</html>


CSS
*,*::after,*::before{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: 	#1b0127;
    
}
.header {
    width: 100%;
    height: 100px;
    background-color: 	#1b0127;
    border-bottom: 1px solid #960c78;
   
    display:flex;
    justify-content:center;
    align-items:center;
    position: fixed;
    top: 0px;
    z-index: 99999999999999;
   
}
.header__container {
    width: 90%;

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-direction:row;

    position: relative;
    z-index: 4;
    background-color: #1b0127;
    height: 100%;
    padding: 0px 20px;

}
.header__logo {
    font-family: 'arial';
    font-size: 40px;
    font-weight: bolder;
    color: #960c78;
}
.header__menu {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-direction:row;
    width: 40%;

}
.header__link {
    font-family: 'arial';
    font-size: 17px;
    font-weight: bolder;
    color: #960c78;
    text-decoration: none;
    transition-duration: 300ms;
    padding: 0px 10px;
  
}
.header__film_popup {
    display:none;
    justify-content:space-around;
    align-items:center;
    flex-direction:column;
    position:absolute;
    height: max-content;
    width: max-content;
    background-color: #1b0127;
    padding:10px;
    top:60px;
    border:0.5px solid white;
    left:calc(100% - 40% - 35px)

    
    
    
}
.header__film_link {
    padding: 10px;
    color:#960c78;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.header__film_link:hover{
    text-decoration: underline;
}

.header__menu a:nth-child(1):hover ~.header__film_popup{
    display:flex;
}
.header__film_popup:hover{
    display:flex;
}
@media(max-width:800px){
    .header__container{
        width: 100%;
    }
    .header__link{
        padding: 0px 5px;
    }
}

.header__burger {
    display: none;
    width: 50px;
    height: 40px;
    justify-content: center;
    align-items: center;
    position: relative;


}
.burger__line {
    background-color: #960c78;
    width: 100%;
    height: 3px;
    position: absolute;
    transition-duration: 300ms;
}

.header__burger span:nth-child(1){
    top: 0;
}

.header__burger span:nth-child(3){
    bottom: 0;
}

.header__burger_active  span:nth-child(1){
    transform:rotate(45deg) ;
    top: 19px;
}

.header__burger_active span:nth-child(2){
    display: none;
}

.header__burger_active  span:nth-child(3){
    transform:rotate(-45deg) ;
     bottom: 19px;
}


.burger__menu {
    display: none;
    position: fixed;
    top: 100px;
    background-color: #fff;
    width: 100%;
    transform: translateY(-110%);
    transition-duration: 300ms;
   
  

    

}
.__active{
     transform: translateY(-0%);
}
.burger__inner {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0px auto;
    
  

}
.burger__link {
    text-decoration: none;
    padding: 25px;
    color: #1b0127;
    font-family: 'arial';
    font-size: 25px;
    font-weight: bolder;
}
.burger__film_popup {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #1b0127;
    



}
.burger__film_link {
    text-decoration: none;
    padding: 20px;
    color: #1b0127;
    font-family: 'arial';
    font-size: 20px;
    font-weight: bolder;
}
._active{
    display: flex;
}
._lock{
    overflow: hidden;
}
@media (max-width: 768px){
    .header__burger{
        display: flex;
    }
    .header__menu{
        display: none;
    }
    .burger__menu{
        display: flex;
    }
}

JAVA-SCRIPT
const burger = document.querySelector('.header__burger')
const _film = document.querySelector('._film')
const burger__menu = document.querySelector('.burger__menu')
const burger__film_popup = document.querySelector('.burger__film_popup')
const body = document.querySelector('body')
burger.addEventListener('click',function () {
	burger.classList.toggle('header__burger_active');
	burger__menu.classList.toggle('__active');
    body.classList.toggle('_lock')
	

	
});
_film.addEventListener('click',function () {
	burger__film_popup.classList.toggle('_active')
	
})
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
Насколько я понял то вот так:
https://disk.yandex.ru/i/3dvYybdVOXTLWA - 30 сек. видео

}{реновый я режиссер...

overflow: auto;
max-height: calc(100vh - 100px); - высоту меню ограничь - высота экрана минус 100 ( это твой top: 100px)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы