Sidebar Menu Using only Html and CSS

byCodingFlicks -July 09, 2021

0

Hello Friends, in today's blog, I am going to share a CSS animation example. In this project, we will learn how to create a side nav using only HTML and CSS. Initially, the sidebar will not be visible, but when we click the bar icon to the top-left corner, the menu will appear from the left with a smooth CSS transition effect. I have shared many HTML CSS, CSS animation, and javascript-based snippets before in this blog. Would you please make sure to check those by clicking the load more button down below on the homepage?

With a simple explanation, a side navbar is a navigation bar with various nav items positioned to the website's left or right side. I have shared a couple of navigation menu-related snippets in this blog, but today I will share code on animated sidenav.

You may also like:

as you have seen from the top image, the snippet contains a blackish bar with hyperlinks on the left side known as sidenav or sidebar of any web page. In this project (animated sidebar), the side navbar will be hidden to the left side of the webpage screen. There is a button with a font-awesome icon to the top left corner, and when we click that button, a side nav smoothly comes from the right side to the left. In this way, the open button will disappear. To close the side nav, we have to click the cross icon, which you will see in the top right corner of the blackish sidebar.

without further explanation, I am providing you the code below so that you can have a look

Sidebar Menu Using only Html and CSS (source Code)

To create this project, you have to make two files. One is HTML, and the other is CSS. Copy the code below and paste it into the individual files. Don't forget to link the CSS file to your HTML file.

HTML

<input type="checkbox" id="icon" />
    <label for="icon"  class="iconbtn">
      <i class="fa fa-times" id="closebtn"></i>
      <i class="fa fa-bars" id="openbtn"></i>
    </label>

    <div class="sidenav">
      <div class="logo">
        <img src="https://i.postimg.cc/y6pKKqcf/avatar.png" alt="">
      </div>
      <ul class="mainNav">
        <li class="single-nav">
          <a href="#">
            <i class="fa fa-chevron-right "></i>
            <span>Home</span>
          </a>
        </li>
        <li class="single-nav">
          <a href="#">
            <i class="fa fa-chevron-right "></i>
            <span>About</span>
          </a>
        </li>
        <li class="single-nav">
          <a href="#">
            <i class="fa fa-chevron-right "></i>
            <span>Services</span>
          </a>
        </li>
        <li class="single-nav">
          <a href="#">
            <i class="fa fa-chevron-right "></i>
            <span>Portfolio</span>
          </a>
        </li>
        <li class="single-nav">
          <a href="#">
            <i class="fa fa-chevron-right "></i>
            <span>Blog</span>
          </a>
        </li>
        <li class="single-nav">
          <a href="#">
            <i class="fa fa-chevron-right "></i>
            <span>Contact</span>
          </a>
        </li>
        <li class="single-nav">
          <a href="#">
            <i class="fa fa-chevron-right "></i>
            <span>Terms</span>
          </a>
        </li>
        <li class="single-nav">
          <a href="#">
            <i class="fa fa-chevron-right "></i>
            <span>Privacy Policy</span>
          </a>
        </li>
        <li class="single-nav">
          <a href="#">
            <i class="fa fa-chevron-right "></i>
            <span>Socials</span>
          </a>
        </li>

      </ul>

    </div>

    <div class="content">
      <h2>Animated Sidenav <br> only HTML CSS</h2>
    </div>

CSS:

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
}

body{
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

.logo {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin: 0 auto;
}

.logo img{
  max-width:100%;	
}

.sidenav{
  background-color:#333 ;
  left: -250px;
  width: 250px;
  height: 100vh;
  text-align: center;
  padding-top: 30px;
  position: fixed;
  transition:  all .5s ease;
}

.sidenav a{
  display: block;
  padding: 20px 0;
  color: #fff;
  font-size: 15px;
}

.sidenav a:hover{
  color: #333;
  background-color: #fff;
  font-weight: bold;
  border-right: 2px solid #ffffff;
}

.sidenav .fa{
  display: inline-block;
}

.single-nav {
	border-bottom: 1px solid #fff;
}

#icon{
  display: none;
}

label #openbtn, label #closebtn{
  position: absolute;
  cursor: pointer;
}

label #openbtn{
  top: 20px;
  left: 70px;
  font-size: 40px;
  background-color: #333;
  padding: 10px;
  color:#fff;
}

label #closebtn{
z-index: 1111;
top: 20px;
left: -212px;
font-size: 30px;
}

#icon:checked ~ .sidenav{
  left:0;
}

#icon:checked ~ label #closebtn {
	left: 212px;
	color: #fff;
}

#icon:checked ~ label #openbtn{
  left:170px;
  opacity: 0;
}

#icon:checked ~ .content{
  margin-left: 250px;
}

.content {
	background: url(https://images.pexels.com/photos/4194857/pexels-photo-4194857.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
	height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	padding: 300px 0;
	transition: all .5s;
	font-size: 50px;
	text-transform: uppercase;
}

I hope you like this simple snippet. If so, please share the articles on this blog. Also, follow us on our social media profiles to stay connected with this blog. Thank you for coming to this blog.

Please do not enter any spam link in the comment box.