Question

我为我的网站构建了一个导航栏。此代码是从另一个网站带来的。这是CSS

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

这里是HTML

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

我的问题是，单击菜单项后导航栏抽屉菜单没有关闭。单击抽屉菜单上的任何项目后，我需要关闭抽屉。如何解决这个问题呢。我可以使用哪些脚本？非常感谢您的帮助。谢谢

演示在这里：http://androidcss.com/demos/css/css-drawer-menu/#

Answer 1

我简化了代码，因为：

因此以后您想添加其他内容时可以拥有更大的灵活性。
您的导航菜单将从一开始就关闭，而不是像之前使用的代码一样在一秒钟后关闭。
58行代码，而不是125行

它还将为您提供jQuery的介绍机会。

请参阅解释每一行代码的注释，如果您不了解某些内容，请写注释。

Codepen要使用：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>

单击菜单项后，导航栏抽屉菜单未关闭

1 个答案: