Click here to Skip to main content
15,559,540 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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 !
HTML
<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:

JavaScript
const hamburger = document.getElementsByClassName('hamburger')[0]
const menu = document.getElementsByClassName('menu')[0]
hamburger.addEventListener('click', () => {
  menu.classList.toggle('active')
})
Posted
Updated 7-Aug-20 1:14am
v2

Here, a sample to try:
basic HTML:
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:
HTML
<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:
JavaScript
/* 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[^]
 
Share this answer
 
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')
})
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>
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900