За последние 24 часа нас посетили 18542 программиста и 1605 роботов. Сейчас ищет 1221 программист ...

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

Тема в разделе "HTML и CSS", создана пользователем koreshs, 31 июл 2022.

Метки:
  1. koreshs

    koreshs Новичок

    С нами с:
    31 июл 2022
    Сообщения:
    3
    Симпатии:
    0
    Коллеги, Молю помогите. Имею большой опыт. Но кажется с простой задачей справится не могу.
    -Имеется в углу экрана кнопка гамбургер.
    -При нажатии на которую открывается меню.
    Работало просто. Делаю любой тег в виде кнопки, и вешаю на него :HOVER.
    Меню же открывается после наведения на тег в виде кнопки.
    То теперь надо усложнить задачу. надо чтобы после открытия меню тег в виде кнопки превращался в кнопку с крестиком.
    Т.е. надо так чтобы после срабатывания :HOVER, тег само собой меняет иконку, но при этом чтобы при нажатии на иконку меню закрывалось.
    HTML:
    1. <div class=menu>
    2.   <div class=icon>
    3.     <ul>
    4.       <li><a>Пункт меню 1
    5.       <li><a>Пункт меню 2
    6.     </ul>
    7.   </div>
    8. </div>
    Код (CSS):
    1. .icon{
    2.   width: 40px; height: 40px;
    3.   position: relative;
    4. }
    5. .icon ul{
    6.   position: absolute;
    7.   top: 100%;
    8.   display: none;
    9. }
    10. .icon:hover{
    11.   display: block;
    12. }
    Как видно простая схема открывания меню при наведении.
    .
    Но как сделать чтобы изначальная иконка меняла свое поведение после клика на открытие меню?
    Кликабельность иконки все равно из чего делать, из внутреннего DIV или из внешнего значения не имеет.
     
  2. koreshs

    koreshs Новичок

    С нами с:
    31 июл 2022
    Сообщения:
    3
    Симпатии:
    0
    Добавлено:
    хочу сделать меню для смартфона
    https://gesor.ru/index.php
    Там слева открывается гамбургер на маленьком экране
    .
    суть в том что сейчас клик пальцем по экрану в пустое не активное место расценивается как ховер.
    ну в общем
    при первом клике пальцем на гамбургере открывается меню. А при втором клике на гамбургере меню должно закрыватся
     
  3. Dimon2x

    Dimon2x Старожил

    С нами с:
    26 фев 2012
    Сообщения:
    2.209
    Симпатии:
    185
    Самый простой вариант

    HTML:
    1.  
    2. <div id="menu">клик по гамбургеру
    3.   <div id="icon" class="hidden">
    4.     <ul>
    5.       <li><a>Пункт меню 1
    6.       <li><a>Пункт меню 2
    7.     </ul>
    8.   </div>
    9. </div>
    Код (CSS):
    1. .hidden{
    2.   display: none;
    3. }
    Код (Javascript):
    1. let elem = document.querySelector('#icon');
    2. let menu = document.querySelector('#menu');
    3.  
    4.  
    5. menu.addEventListener('click', function(){
    6.   elem.classList.toggle('hidden');
    7. });
     
  4. koreshs

    koreshs Новичок

    С нами с:
    31 июл 2022
    Сообщения:
    3
    Симпатии:
    0
    Это я умею, меня интересует решение проблемы способами без JS и без добавления checkbox`а.
     
  5. programmer007

    programmer007 Новичок

    С нами с:
    30 ноя 2022
    Сообщения:
    14
    Симпатии:
    3
    Как решили проблему без JS?