View original (French)

Sub-menu in Hamburger Menu

Solved
patricia@84 Posted messages 114 Status Member -  
xHaMaz Posted messages 123 Registration date   Status Member Last intervention   -

Hello,

Out of laziness, I admit, I used a menu extracted from a template in a site I'm currently designing, where the mobile version's hamburger menu is triggered by the following JavaScript script:

(() => {const ul = document.querySelector('.header-nav-lists'); const hamburger = document.querySelector('.header-hamburger-icon'); hamburger.addEventListener('click', () => { ul.classList.toggle('show'); hamburger.classList.toggle('show'); })})()

So far, everything has worked well regardless of the screen size.

I wanted to add a sub-menu to this menu and, while the menu still works well on the "computer" format, it doesn't on mobile. The menu displays fine when I click on the hamburger, but the sub-menu does not appear even though it's present, as I checked with Firefox's inspector.

So I suspect there's an issue with the JavaScript script for the hamburger, but I don't know anything about JavaScript. I tried to get into it, but my seventy-year-old brain can't manage.

My HTML code:

<nav class="header-nav-bar"> <div class="header-nav-logo"><a href="index.php"><img src="image/logo.png" alt="logo"></a></div> <ul class="header-nav-lists"> <li class="header-nav-list"><a class="header-nav-link header-active" href="index.php">Home</a></li> <li class="header-nav-list deroulant"><a href="#">Gîte</a> <ul class="sous"> <li><a class="header-nav-link" href="details.php">Presentation</a></li> <li"><a "header-nav-link" href="interieur.php">Interior</a></li> <li><a "header-nav-link" href="exterieur.php">Exterior</a></li> </ul> </li> <li class="header-nav-list"><a class="header-nav-link" href="tarifs.php">Rates</a></li> <li class="header-nav-list"><a class="header-nav-link" href="visiter.php">To visit</a></li> <li class="header-nav-list"><a class="header-nav-link" href="reserver.php">Reserve</a></li> <li class="header-nav-list"><a class="header-nav-link" href="contact.php">Contact</a></li> </ul> <div class="header-hamburger-icon"> <div class="header-hamburger-line-1"></div> <div class="header-hamburger-line-2"></div> <div class="header-hamburger-line-3"></div> </div> </div> </nav>

Thank you in advance for any help you can provide.

Best regards,

Patricia

3 answers

  1.
    xHaMaz Posted messages 123 Registration date   Status Member Last intervention   18
     

    Hello

     (() => { const ul = document.querySelector('.header-nav-lists'); const hamburger = document.querySelector('.header-hamburger-icon'); const deroulant = document.querySelector('.deroulant'); hamburger.addEventListener('click', () => { ul.classList.toggle('show'); hamburger.classList.toggle('show'); }); deroulant.addEventListener('click', () => { deroulant.querySelector('.sous').classList.toggle('show'); }); })();

    Normally, this will add a click event handler to the "dropdown" link that will show or hide the submenu when you click on it.

    0
  2. patricia@84 Posted messages 114 Status Member 9
     

    Hello,

    Thank you for your response, it successfully displayed the submenu on click. I just have a bit of CSS left to do to improve the layout.

    0
  3. xHaMaz Posted messages 123 Registration date   Status Member Last intervention   18
     

    Perfect!

    0