如何让navbar在使用后消失？

Question

我正在制作一个网站，它在桌面和移动设备上都具有响应能力。在移动设备上，如果我单击其中一个属性标签（例如关于），它将成功导航到 html 页面的那个部分。但是，用户必须然后单击 x 图标才能退出导航栏。我想知道是否有一种方法可以让导航栏在某个事件（单击 link）发生后关闭。

图片：

Html:

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<link rel='shorcut icon' type='image/x-icon' href='circle.ico' />
</head>
<body>

<title>Home</title>

<div class="header">
  <h3 class="logo" id='logo'>a-town youth</h3>
  <input type="checkbox" id="chk">
  <label for="chk" class="show-menu-btn">
    <i class="fas fa-ellipsis-h"></i>
  </label>

  <ul class="menu" id='navbar'>
    <a href="#section1">Home</a>
    <a href="#section2">About</a>
    <a href="#section3">Calendar</a>
    <a href="#section4">News</a>
    <a href="#section5">Contact</a>
    <div class='copyright-info'>
    </div>
    <label for="chk" class="hide-menu-btn">
      <i class="fas fa-times"></i>
    </label>
  </ul>
</div>

<style>
body {
  margin:0px;
}
.colour-block {
  background:#34495e;
  width:60%;
  padding:7% 20% 10% 20%;
  color:#fff;
}
.white-block {
  background:#fff;
  width:60%; /*Change this to change padding/margin around text in dividers*/
  padding:7% 20% 10% 20%;
  color:#823A9C;
}


h1 {
  text-align:center;
  font-size:80px;
  font-family:'wire one', serif;
  font-weight:normal;
}
p {
  font-size:20px;
  font-family:'Raleway', serif;
}


/*------------------*/
/*  SKEW CLOCKWISE  */
/*------------------*/
.skew-cc{
  width:100%;
  height:100px;
  position:absolute;
  left:0px;
  background: linear-gradient(to right bottom, #34495e 49%, #fff 50%),    linear-gradient(-50deg, #ffffff 16px, #000 0);
}


/*-------------------------*/
/* SKEW COUNTER CLOCKWISE  */
/*-------------------------*/
.skew-c{
  width:100%;
  height:100px;
  position:absolute;
  left:0px;
  background: linear-gradient(to left bottom, #fff 49%, #34495e 50%);
}

@media (max-width: 767px){
  .colour-block h1, .white-block h1{ padding-top: 60px;}
  }
</style>

<link href='https://fonts.googleapis.com/css?family=Wire+One|Raleway:300' rel='stylesheet' type='text/css'>

<div class="skew-c" id='section1'></div>
<div class="colour-block">
  <h1>Home</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-cc" id='section2'></div>
<div class="white-block">
  <h1>About</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-c" id='section3'></div>
<div class="colour-block">
  <h1>Calendar</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-cc" id='section4'></div>
<div class="white-block">
  <h1>News</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-c" id='section5'></div>
<div class="colour-block">
  <h1>Contact</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-cc" id='section4'></div>


<div class="content">

</div>

</body>
</html>

Css:

html {
  scroll-behavior: smooth;
}

*{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
}
.header{
  height: 100px;
  background: #34495e;
  padding: 0 20px;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}
.logo{
  line-height: 100px;
  float: left;
  text-transform: uppercase;
  position: fixed;
  top: 0;
  z-index: 1030;
}

.menu{
  float: right;
  line-height: 100px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
}

.copyright-info {
  float: right;
  line-height: 100px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
  visibility: hidden;
}
.menu a{
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 10px;
  transition: 0.4s;
}
.show-menu-btn,.hide-menu-btn{
  transition: 0.4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
}
.show-menu-btn{
  float: right;
}
.show-menu-btn i{
  line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover{
  color: #3498db;
}

#chk{
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}

.content{
  padding: 0 20px;
  margin-top: 120px;
  background-color: #333333;
}
.content img{
  width: 100%;
  max-width: 700px;
  margin: 20px 0;
}
.content p{
  text-align: justify;
}

@media screen and (max-width:800px) {
  .show-menu-btn,.hide-menu-btn{
    display: block;
  }
  .menu{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #333;
    right: -100%;
    top: 0;
    text-align: center;
    padding: 80px 0;
    line-height: normal;
    transition: 0.7s;
  }
  .menu a{
    display: block;
    padding: 20px;
  }
  .hide-menu-btn{
    position: absolute;
    top: 40px;
    right: 40px;
  }
  #chk:checked ~ .menu{
    right: 0;
  }

  .copyright-info {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #333;
    right: -100%;
    top: 0;
    text-align: center;
    padding: 80px 0;
    line-height: normal;
    transition: 0.7s;
    visibility: visible;
  }
}

.card {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 100%;
}

.container {
  padding: 2px 16px;
}
p {
  font-size: 120%;
}

h4 {
  font-size: 130%;
}

注意：导航栏 class 名称是 'menu'

Answer 1

最简单的方法是使用一点 JavaScript。像这样：

        <a href="#section1" onclick="document.getElementById('chk').checked = false">Home</a>

您将在 onclick 事件中更改复选框的选中状态，从而在单击 link 后立即关闭菜单。 link 仍然有效。

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
    <link rel='shorcut icon' type='image/x-icon' href='circle.ico' />
</head>
<body>

<title>Home</title>

<div class="header">
    <h3 class="logo" id='logo'>a-town youth</h3>
    <input type="checkbox" id="chk">
    <label for="chk" class="show-menu-btn">
        <i class="fas fa-ellipsis-h"></i>
    </label>
    
    <ul class="menu" id='navbar'>
        <a href="#section1" onclick="document.getElementById('chk').checked = false">Home</a>
        <a href="#section2" onclick="document.getElementById('chk').checked = false">About</a>
        <a href="#section3" onclick="document.getElementById('chk').checked = false">Calendar</a>
        <a href="#section4" onclick="document.getElementById('chk').checked = false">News</a>
        <a href="#section5" onclick="document.getElementById('chk').checked = false">Contact</a>
        <div class='copyright-info'>
        </div>
        <label for="chk" class="hide-menu-btn">
            <i class="fas fa-times"></i>
        </label>
    </ul>
</div>

<style>
    html {
        scroll-behavior: smooth;
    }
    
    *{
        margin: 0;
        padding: 0;
        font-family: "montserrat",sans-serif;
    }
    .header{
        height: 100px;
        background: #34495e;
        padding: 0 20px;
        color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
    }
    .logo{
        line-height: 100px;
        float: left;
        text-transform: uppercase;
        position: fixed;
        top: 0;
        z-index: 1030;
    }
    
    .menu{
        float: right;
        line-height: 100px;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1030;
    }
    
    .copyright-info {
        float: right;
        line-height: 100px;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1030;
        visibility: hidden;
    }
    .menu a{
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
        padding: 0 10px;
        transition: 0.4s;
    }
    .show-menu-btn,.hide-menu-btn{
        transition: 0.4s;
        font-size: 30px;
        cursor: pointer;
        display: none;
    }
    .show-menu-btn{
        float: right;
    }
    .show-menu-btn i{
        line-height: 100px;
    }
    .menu a:hover,
    .show-menu-btn:hover,
    .hide-menu-btn:hover{
        color: #3498db;
    }
    
    #chk{
        position: absolute;
        visibility: hidden;
        z-index: -1111;
    }
    
    .content{
        padding: 0 20px;
        margin-top: 120px;
        background-color: #333333;
    }
    .content img{
        width: 100%;
        max-width: 700px;
        margin: 20px 0;
    }
    .content p{
        text-align: justify;
    }
    
    @media screen and (max-width:800px) {
        .show-menu-btn,.hide-menu-btn{
            display: block;
        }
        .menu{
            position: fixed;
            width: 100%;
            height: 100vh;
            background: #333;
            right: -100%;
            top: 0;
            text-align: center;
            padding: 80px 0;
            line-height: normal;
            transition: 0.7s;
        }
        .menu a{
            display: block;
            padding: 20px;
        }
        .hide-menu-btn{
            position: absolute;
            top: 40px;
            right: 40px;
        }
        #chk:checked ~ .menu{
            right: 0;
        }
        
        .copyright-info {
            position: fixed;
            width: 100%;
            height: 100vh;
            background: #333;
            right: -100%;
            top: 0;
            text-align: center;
            padding: 80px 0;
            line-height: normal;
            transition: 0.7s;
            visibility: visible;
        }
    }
    
    .card {
        box-shadow: 0 4px 16px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        width: 100%;
    }
    
    .container {
        padding: 2px 16px;
    }
    p {
        font-size: 120%;
    }
    
    h4 {
        font-size: 130%;
    }
    
    body {
        margin:0px;
    }
    .colour-block {
        background:#34495e;
        width:60%;
        padding:7% 20% 10% 20%;
        color:#fff;
    }
    .white-block {
        background:#fff;
        width:60%; /*Change this to change padding/margin around text in dividers*/
        padding:7% 20% 10% 20%;
        color:#823A9C;
    }
    
    
    h1 {
        text-align:center;
        font-size:80px;
        font-family:'wire one', serif;
        font-weight:normal;
    }
    p {
        font-size:20px;
        font-family:'Raleway', serif;
    }
    
    
    /*------------------*/
    /*  SKEW CLOCKWISE  */
    /*------------------*/
    .skew-cc{
        width:100%;
        height:100px;
        position:absolute;
        left:0px;
        background: linear-gradient(to right bottom, #34495e 49%, #fff 50%),    linear-gradient(-50deg, #ffffff 16px, #000 0);
    }
    
    
    /*-------------------------*/
    /* SKEW COUNTER CLOCKWISE  */
    /*-------------------------*/
    .skew-c{
        width:100%;
        height:100px;
        position:absolute;
        left:0px;
        background: linear-gradient(to left bottom, #fff 49%, #34495e 50%);
    }
    
    @media (max-width: 767px){
        .colour-block h1, .white-block h1{ padding-top: 60px;}
    }
</style>

<link href='https://fonts.googleapis.com/css?family=Wire+One|Raleway:300' rel='stylesheet' type='text/css'>

<div class="skew-c" id='section1'></div>
<div class="colour-block">
    <h1>Home</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-cc" id='section2'></div>
<div class="white-block">
    <h1>About</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-c" id='section3'></div>
<div class="colour-block">
    <h1>Calendar</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-cc" id='section4'></div>
<div class="white-block">
    <h1>News</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-c" id='section5'></div>
<div class="colour-block">
    <h1>Contact</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-cc" id='section4'></div>


<div class="content">

</div>

</body>
</html>

如何让navbar在使用后消失？

How to make navbar dissapear after being used?

html

css

navbar

responsive-design