Make my menu ul li a collapse when one li is clicked ?

Question

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 6-Aug-20 22:27pm

imothep85

Updated 7-Aug-20 0:14am

Richard Deeming

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sandeep Mewara · Answer 1 · 2020-08-06T23:19:00

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[^]

imothep85 · Answer 2 · 2020-08-07T03:35:00

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>

Make my menu ul li a collapse when one li is clicked ?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0