CODEWITHSUNDEEP
htmlcssresponsive-designnavbar
Python Coding Tutorials
Python Coding Tutorials

Reputation: 79

How to make navbar dissapear after being used?

I am making a website and it is responsive on both desktop and mobile. On mobile, If i click on one of the attribute tags (such as About) it will successfully navigate to that section of the html page. However, the user has to then go and click the x icon to exit the navbar. I was wondering if there was a way to make the navbar close after an event (the click of a link) has taken place.

Image:

enter image description here

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

Note: the navbar class name is 'menu'

Upvotes: 1

Views: 50

Answers (1)

Morgosus
Morgosus

Reputation: 827

The easiest way would be with the use of a bit of JavaScript. Something like this:

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

You'll change the checked state of your checkbox on the onclick event and thus close your menu as soon as you click the link. The link will still work.

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

Upvotes: 2

Related Questions