Skip to main content

Archive

Show more

Pure Css Side Navigation Bar Design | HTML And CSS

pure-css-side-navigation-bar-design

Pure Css Side Navigation Bar Design

If you read our articles, then you will know that we keep sharing the different concepts of making a "Navigation Bar". We have made playlists for navigation bar on YouTube and website, you can also visit them. and can learn new concepts.

In this article also we will talk about navigation but the concept will be a "side navigation bar" but the code will be new. As we told you, this menu will also have the same concept as the "side navigation bar".

On clicking the menu button, a navigation bar will appear from the left side and it contains the menu options with a close button. But in this article, instead of JavaScript, we will use css. Meaning we will create a side navigation bar using pure css, will not use any kind of javascript.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.

You can read interesting articles on web development. The link is given below.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Pure Css Side Navigation Bar Design</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Pure Css Side Navigation Bar</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <a href="#sidenavbar" class="menu-btn">&#9776;</a>
    <div id="sidenavbar">
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li class="close"><a class="close-btn" href="#">close</a></li>
      </ul>
    </div>
  </body>
</html>



03. CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Poppins";
}

.menu-btn{
  text-decoration: none;
  margin: 20px 60px;
  height: 60px;
  width: 60px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  background: #7D5BA6;
}

#sidenavbar{
  width: 80%;
  max-width: 310px;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  background: #C7A47A;
  left: -310px;
  transition: left 0.4s;
}
#sidenavbar:target{
  left: 0px;
}

ul{
  list-style: none;
  margin-top: 150px;
}
li{
  transition: background 0.4s;
}
li a{
  text-decoration: none;
  color: white;
  display: inline-block;
  padding: 16px;
  padding-left: 30px;
  width: 100%;
}

li.active a{
  color: white;
}

li.active, li:hover{
  background: #CEB497;
}

li.active, li:hover a{
  color: white;
}

.close{
  position: absolute;
  top: 10px;
  right: 0px;
}

.close-btn{
  cursor: pointer;
  z-index: 1;
}

.close:hover{
  background: transparent;
}

#sidenavbar:target+.close-btn{
  left: 0px;
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment