Click here to Skip to main content
14,636,898 members
Rate this:
Please Sign up or sign in to vote.
See more:
hello everyone, this is my html menu !
What i need is to create a js/jquery script who do this, when i click on my hamburger menu it opens the "menu" who contains the ul li a !
And when i click on one of the li, it need to close !

How can i achieve this please, i tried lot of things but nothings has worked !
<nav class="navbar">
    <div class="logo">MY LOGO</div>
    <a href="#" class="hamburger" >
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>
    <div class="menu">
        <ul> 
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#donate">Donate</a></li>
          <li><a href="#download">Download</a></li>
          <li><a href="#howto">How</a></li>
          <li><a href="#reports">Reports</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
</nav>

I tried this small jQuery script, actually when I click on the "hamburger" it open the "menu" but when I click on one of the li a nothing happens, menu doesn't collapse 'close'

so I really need help to solve my problem !
Thanks to everyone who can help !

What I have tried:

const hamburger = document.getElementsByClassName('hamburger')[0]
const menu = document.getElementsByClassName('menu')[0]
hamburger.addEventListener('click', () => {
  menu.classList.toggle('active')
})
Posted
Updated 7-Aug-20 0:14am
v2
Rate this:
Please Sign up or sign in to vote.

Solution 1

Here, a sample to try:
basic HTML:
<body>  
    <div class="container">  
        <ul>  
            <li class="dropdown cssState">  
                Tamilnadu  
                <ul>  
                    <li>Chennai</li>  
                    <li>Madurai</li>  
                    <li>Trichy</li>  
                    <li>Coimbatore </li>  
                 </ul>  
            </li>  
   
            <li class="dropdown cssState">  
                Andhra  
                <ul>  
                    <li>Chennai</li>  
                    <li>Madurai</li>  
                    <li>Trichy</li>  
                    <li>Coimbatore </li>  
                </ul>  
            </li>  
            <li class="dropdown cssState">  
                Kerala  
                <ul>  
                    <li>Chennai</li>  
                    <li>Madurai</li>  
                    <li>Trichy</li>  
                    <li>Coimbatore </li>  
                </ul>  
            </li>  
                
            <li class="dropdown cssState">  
                Tamilnadu  
                <ul>  
                    <li>Chennai</li>  
                    <li>Madurai</li>  
                    <li>Trichy</li>  
                    <li>Coimbatore </li>  
                </ul>  
            </li>  
   
            <li class="dropdown cssState">  
                Andhra  
                <ul>  
                    <li>Chennai</li>  
                    <li>Madurai</li>  
                    <li>Trichy</li>  
                    <li>Coimbatore </li>  
                </ul>  
            </li>  
            <li class="dropdown cssState">  
                Kerala  
                <ul>  
                    <li>Chennai</li>  
                    <li>Madurai</li>  
                    <li>Trichy</li>  
                    <li>Coimbatore </li>  
                </ul>  
            </li>  
        </ul>   
    </div>  
</body>

Stylesheet:
<style>  
        li.dropdown ul {  
          display : none; /*To hide the items while loading the page */  
        }  
              
        .container {  
          width:70%;   
          float: left;           
        }  
         
        /* Main style part for the menu and items look and feel */  
        .container .cssState {  
            float: left;  
            display:block;  
            border-top-style: solid;  
            border-top-width:1px;  
            border-top-color:black;  
            border-bottom-width:1px;  
            border-bottom-color:grey;  
            border-bottom-style:solid;  
            width: 200px;  
            border-right-style:solid;  
            border-right-color:white;  
            border-right-width:10px;            
            padding: 2px;  
            cursor: pointer;  
            font-weight: bold;  
        }  
             
    </style>  

Javascript to toggle:
/* This is the place where the toggling of showing and hiding items happens*/  
  
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>  
  
<script type="text/javascript">  
    $(document).ready(function(){  
        $('li.dropdown').click(function () {  
            $('li.dropdown').not(this).find('ul').hide();  
            $(this).find('ul').toggle();  
        });  
     });  
    </script>

Reference: Menu And Items With Expand And Collapse View Using jQuery[^]
   
v2
Comments
imothep85 7-Aug-20 5:24am
   
Its not working
on my html i have FIRST to click on the 'HAMBURGER' who OPEN the 'MENU' who contains all my li a.
         <nav class="navbar">
            <div class="logo">MY LOGO</div>
            <a href="#" class="hamburger" >
              <span class="bar"></span>
              <span class="bar"></span>
              <span class="bar"></span>
            </a>
            <div class="menu">
            <ul> 
              <li><a href="#home">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#donate">Donate</a></li>
              <li><a href="#download">Download</a></li>
              <li><a href="#howto">How</a></li>
              <li><a href="#reports">Reports</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          </nav>
Sandeep Mewara 7-Aug-20 5:29am
   
There is no href needed. I have shared the entire example, please refer it. You just need ul-li and classe defined to pay with jquery
imothep85 7-Aug-20 5:38am
   
I did some changes
Hide   Copy CodeHide   Copy Code
         <nav class="navbar">            <div class="logo">MY LOGO</div>            <a class="hamburger" >              <span class="bar"></span>              <span class="bar"></span>              <span class="bar"></span>            </a>            <div class="menu">            <ul>               <li><a href="#home">Home</a></li>              <li><a href="#about">About</a></li>              <li><a href="#donate">Donate</a></li>              <li><a href="#download">Download</a></li>              <li><a href="#howto">How</a></li>              <li><a href="#reports">Reports</a></li>              <li><a href="#contact">Contact</a></li>            </ul>          </div>          </nav>


and the jquery

Hide   Copy CodeHide   Copy Code
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>    <script type="text/javascript">      $(document).ready(function(){          $('li.dropdown').click(function () {              $('li.dropdown').not(this).find('ul').hide();              $(this).find('ul').toggle();          });       });      </script>


but is not working !!
I dont want to change my css because the menu is already designed !
this is my menu : https://ibb.co/b18Phww

the only missing function in my code is for closing the menu when any li is clicked
const hamburger = document.getElementsByClassName('hamburger')[0]
const menu = document.getElementsByClassName('menu')[0]
hamburger.addEventListener('click', () => {
  menu.classList.toggle('active')
})
Rate this:
Please Sign up or sign in to vote.

Solution 2

OK SOLVED !!!

<script>

/// this toggle the hamburger menu ON and show the menu ///

$( '.hamburger' ).click(function() {
$( '.menu' ).toggleClass('active');
});

/// this activate the click menu ON and hide the menu ///

$( '.menu li' ).click(function() {
$( '.menu' ).toggleClass('active');
});

</script>
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100