navigation bar drawer menu doesn't close after clicking menu item

Question

i built a navigation bar for my website.this code is brought from another site. it's css here

* {
    padding:0;
    margin:0;
}

body {
    font-family:Verdana, Geneva, sans-serif;
    font-size:18px;
    background-color:#FFF
}

header {
    width:100%;
    background-color:#06C;
    z-index:1000;
}

.menu-bar {
    color:#FFF;
    font-size:26px;
    cursor:pointer;
    padding:10px 12px;
    margin-left:10px;
    margin-top:5px;
    margin-bottom:5px;
}

.menu-bar:hover {
    background-color:rgba(0, 0, 0, 0.1);
    border-radius:50px;
}

#tag-menu {
    display:none;
}


#tag-menu:checked ~ div.drawer {
 animation: slide-in 0.5s ease;
 animation-fill-mode: forwards;
}

.drawer {
    position:fixed;
    left:-280px;
    background-color:#06C;
    height:100%;
    z-index:100;
    width:200px;
    animation: slide-out 0.5s ease;
    animation-fill-mode: forwards;
}

.drawer ul li {
    list-style:none;
}

.drawer ul li a {
    padding:10px 30px;
    text-decoration:none;
    display:block;
    color:#FFF;
    border-top:1px solid #039;
}

.drawer ul li a:hover{
    background-color:rgba(0, 0, 0, 0.1);
}

.drawer ul li a i {
    width:50px;
    height:35px;
    text-align:center;
    padding-top:15px;
}


@keyframes slide-in {
 from {left: -280px;}
 to {left: 0;}
}

@keyframes slide-out {
 from {left: 0;}
 to {left: -280px;}
}

it's HTML here

<header>
  <input type="checkbox" id="tag-menu">
  <label class="fa fa-bars menu-bar" for="tag-menu"></label>


  <div class="drawer" id="drawer">
    <nav class="overlay-menu">
      <ul>
        <li><a href="#"><i class="fa fa-user-secret"></i>A</a></li>
        <li><a href="#"><i class="fa fa-check-circle-o"></i>B</a></li>
        <li><a href="#"><i class="fa fa-user-circle"></i>C</a></li>
        <li><a href="#"><i class="fa fa-info-circle "></i>D</a></li>
      </ul>
    </nav>
  </div>

My problem is that the navigation bar drawer menu doesn't close after clicking on menu item. i need to close the drawer after click any item on the drawer menu. how to solve this problem. what are the scripts which i can use?. Your help is highly appreciated.Thanks

Demo is here: http://androidcss.com/demos/css/css-drawer-menu/#

Answer 1

I simplified the code a little bit because:

so you can have more flexibility later on when you want to add other things.
your nav menu will be closed from the start, not after 1 second like in the previous code used.
58 lines of code instead of 125

It will also give you an introduction opportunity to jQuery.

Please see the comments that explain each line of code and write a comment if you don't understand something.

Codepen to play with: https://codepen.io/larrytherabbit/pen/NWrGMWE

 $("#hamburger").click(function(){ $("nav").toggleClass('open', 'close'); }); $("a").click(function(){ $("nav").toggleClass('open', 'close'); });

 header, nav { background-color:#06C;font-family:'Open Sans'; } header { width:100%;display:flex;align-items:center; height:80px;color:#FFF;justify-content:flex-start; } /* we use flex display to position the hamburger icon on the side of the AndroiCSS h2 element */ #hamburger { cursor:pointer; } /* add the small hand cursor pointer to indicate this element is clickable; it triggers the jQuery on click */ header * { margin:0 15px; } .fa-bars, header h2 { font-size:28px!important; } header h2 { font-weight:400!important; } nav { display:flex;flex-direction:column;width:0;align-items:center; transition:width 0.2s ease; } nav.open { width:250px; } nav.close { width:0; } nav * { color:#FFF!important;font-family:'Open Sans';font-size:20px!important;margin-right:15px; } nav a { text-decoration:none!important; border-top:0.5px solid gray;width:100%;text-align:center;display:flex;align-items:center;justify-content:center;height:55px; } nav a:hover { background-color:rgba(0, 0, 0, 0.1); } /* this changes the bg color on hover over the nav element */

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css drawer menu demo</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <!-- this loads the font aswesome library for the hamburger icon (fa-bars) and the social icons; the class 'fa' calls the font awesome library and the fa-xxx class calls the specific icon needed--> <header> <i id="hamburger" class="fa fa-bars"></i> <h2>AndroidCSS</h2> </header> <nav> <a href="javascript:void(0)"><i class="fa fa-facebook"></i> <span>Facebook</span></a> <!-- nav menu no need for <ul> or <li> tags here --> <!-- the <a> tags are link tags and the <i> tags are used to call font awesome icons again --> <a href="javascript:void(0)"><i class="fa fa-facebook"></i><span>Facebook</span></a> <a href="javascript:void(0)"><i class="fa fa-facebook"></i><span>Facebook</span></a> <a href="javascript:void(0)"><i class="fa fa-facebook"></i><span>Facebook</span></a> <a href="http://www.reddit.com"><i class="fa fa-facebook"></i><span>Facebook</span></a> </nav>

navigation bar drawer menu doesn't close after clicking menu item

Question

1 answers

solution1
1 ACCPTED 2020-10-13 18:32:39

navigation bar drawer menu doesn't close after clicking menu item

Question

1 answers

solution1 1 ACCPTED 2020-10-13 18:32:39

solution1
1 ACCPTED 2020-10-13 18:32:39