le menu du tiroir de la barre de navigation ne se ferme pas après avoir cliqué sur l'élément de menu

aksl

J'ai construit une barre de navigation pour mon site Web, ce code est importé d'un autre site. c'est css ici

* {
    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;}
}

c'est du HTML ici

<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>

Mon problème est que le menu du tiroir de la barre de navigation ne se ferme pas après avoir cliqué sur l'élément de menu. Je dois fermer le tiroir après avoir cliqué sur n'importe quel élément du menu du tiroir. Comment résoudre ce problème. quels sont les scripts que je peux utiliser?. Votre aide est très appréciée.Merci

La démo est ici: http://androidcss.com/demos/css/css-drawer-menu/#

avia

J'ai un peu simplifié le code car:

  1. afin que vous puissiez avoir plus de flexibilité plus tard lorsque vous souhaitez ajouter d'autres éléments.
  2. votre menu de navigation sera fermé dès le début, pas après 1 seconde comme dans le code précédent utilisé.
  3. 58 lignes de code au lieu de 125

Cela vous donnera également une opportunité d'introduction à jQuery.

Veuillez consulter les commentaires qui expliquent chaque ligne de code et rédigez un commentaire si vous ne comprenez pas quelque chose.

Codepen pour jouer avec: 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>

Articles connexes