Бургер меню

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

Для картинки бургер меню, разумно взять бургер из svg и сделать его кнопкой. 

<button class=»burg»>

    </button>

<style>

        .burg{

            right: 5%;

            background-image: url(«bur.svg»);

            width: 70px;

            height: 70px;

            display: block;

            position: fixed;

            top: 4%;

            opacity: 0.8;

            z-index: 1;

        }

        button{

            background: none;

            border: none;

        }

</style>

Далее простейшая логика, открытия и как вы догадались само собой разумеется, закрытия всей этой изощренной конструкции. Будет на javascript главным образом только потому что придумать что-либо проще и постапокалиптичнее просто невозможно.

<script>

        let count = +0;

        document.querySelector(‘.burg’).onclick=function(){

                count +=1;

            if(count<=1){

                document.querySelector(«#offmenu»).classList.add(«openmenu»);

            }else{

                document.querySelector(«#offmenu»).classList.remove(‘openmenu’);

                count =0;

            }

        }

    </script>

Все вроде просто, но в js если купить два самоучителя для чайников за 9, то получится 99. Потому что символ плюса это еще и знак конкатенации. В остальном при нажатии на кнопку переменной приплюсовывается значение, второе нажатие плюсует еще значение которое обнуляет счетчик.

Проблема возникла с css классом самого меню #offmenu, для того чтобы скрыть его полностью из видимости, было придумано прятать шрифт под самый нижний слой с помощью z-index: Только шрифт, потому что если айди задать скрытый параметр, то изменить его с помощью класса будет невозможно. Как оказалось потом у этого способа есть свои подводные камни. В длинных стилях по каким то причинам, спрятать шриф за верхним слоем не так и просто. А в остальном все работатет. 

Менюшку можно увидеть в действии, на сайте nasobe.ru если нажать сочетание клавиш ctrl+U или с помощью F12 можно посмотреть весь код бургер меню в действии

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

js код для стиля css на нажатие кнопки
js стиль для css нажатие кнопки

Полный скрипт бургер меню

<!— Начало меню! —>

    <button class=»burg»>

    </button>

    <ul id=»offmenu»>

        <a href=»https://nasobe.ru»><li class=»font»>Главная</li></a>

    </ul>

    <style>

        .burg{

            right: 5%;

            background-image: url(«bur.svg»);

            width: 70px;

            height: 70px;

            display: block;

            position: fixed;

            top: 4%;

            opacity: 0.8;

            z-index: 1;

        }

        button{

            background: none;

            border: none;

        }

        .openmenu{

            top: 7%;

            max-height: 90%;

            max-width: 80%;

            width: 600px;

            opacity: 0.9;

            background-color:rgb(37, 173, 24);

            border: 1px solid red;

            font-size: 24px;

        }

        #offmenu{      

            position: fixed;

            overflow: auto;

        }

        .font{

            z-index:2;

            display: flex;

            flex: 0 100%;

            justify-content: center;

            align-items: center;

            margin: 2%;

            background-color:rgb(32, 151, 32);

            opacity: 1;

            min-height: 50px;

        }

        .font:hover{

            background-color:rgba(0, 255, 0, 0.3);

            color: white;

            border: 1px solid red;

        }

    </style>

    <script>

        let count = +0;

        document.querySelector(‘.burg’).onclick=function(){

                count +=1;

            if(count<=1){

                document.querySelector(«#offmenu»).classList.add(«openmenu»);

            }else{

                document.querySelector(«#offmenu»).classList.remove(‘openmenu’);

                count =0;

            }

        }

    </script>

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

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