使用后如何使导航栏消失?

Python编码教程

我正在制作一个网站,并且它在台式机和移动设备上都可以响应。在移动设备上,如果我单击属性标签之一(例如“关于”),它将成功导航到html页面的该部分。但是,用户必须然后单击x图标以退出导航栏。我想知道是否有办法在事件(单击链接)后关闭导航栏。

图片:

在此处输入图片说明

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%;
}

注意:导航栏的类名是'menu'

摩高索斯

最简单的方法是使用一些JavaScript。像这样:

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章