How to create a responsive SideBar Menu using HTML & CSS only.

Hello Designers , In today blog you will learn how to create a responsive sidebar menu using html and css .

DESIGN VIEW THAT WE ARE GOING TO CREATE

FULL SCREEN SIDEBAR MENU VIEW

FULL SCREEN SIDEBAR MENU VIEW WHEN SCREEN SIZE IS 826px

FULL SCREEN SIDEBAR MENU VIEW WHEN SCREEN SIZE IS 646px

Video Tutorial

Preview of full code

HTML FILE

 
  
  
  <html>
  
  <title>SideBar Menu</title>
  <head>  
       <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    </head>

   
<body>

    <input type="checkbox" id="menu">

  <nav>

      <label>Coding Zone</label>

      <ul>
          <li><a href="#">Logout</a></li>

      </ul>

      <label for="menu" class="menu-bar">
              
        <i class="fa fa-bars"></i>
           
      </label>

  </nav> 

  <div class="side-menu">

    <center>
          <img src="image.jpg">
          <br><br>

          <h2>Anjali Sharma</h2>
    </center>
    <br>

    <a href="#"><i class="fa fa-user"></i><span>Customers</span></a>
    <a href="#"><i class="fa fa-envelope"></i><span>Message</span></a>
    <a href="#"><i class="fa fa-shopping-basket"></i><span>Products</span></a>
    <a href="#"><i class="fa fa-sellsy"></i><span>Statistices</span></a>
    <a href="#"><i class="fa fa-ban"></i><span>Ban Customers</span></a>
    <a href="#"><i class="fa fa-cog"></i><span>Setting</span></a>
    
    
    <a href="#" class="Logout"><span>Logout</span></a>


  </div>


  <div  class="data">


  </div>


</body>

</html>

CSS FILE

 
  
  *{

    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}


.data{

    background: url(laptop.jpg);
    height: 100vh;
    margin-left: 250px;
    background-size: cover;
    background-repeat: no-repeat;
}

nav{

    background: #1D2951;
    line-height: 80px;
    position: fixed;
    width: 100%;
}

label{

    line-height: 80px;
    font-size: 30px;
    color: white;
    font-weight: 200;
    margin-left: 50px;
    cursor: pointer;

}

nav ul{

    float: right;
    margin-right: 20px;
}

nav ul li{

    line-height: 80px;
    margin: 0 10px;
}

nav ul li a{

    color: white;
    font-size: 20px;
    padding: 6px 15px;
    font-weight: 600;
    background-color: rgb(55,34,246);
    border-radius: 3px;
}

nav ul li a:hover{

    background-color: rgb(49, 27, 214);
    color: white;
    transition: 0.5s;

}

.side-menu{

    position: fixed;
    background: #1D2951;
    width: 250px;
    height: 100%;
    margin-top: 80px;
}

.side-menu center img{

    height: 120px;
    width: 120px;
    border-radius: 50%;
    margin-top: 30px;
    border: 3px solid white;
}

.side-menu center h2{

    color: white;
}


.side-menu a{

    display: block;
    line-height: 60px;
 
    transition: 0.5s;

}

.side-menu a:hover{

    background: rgb(20,54,165);
    padding-left: 20px;
}

.side-menu span{

    font-size: 20px;
    margin-left: 10px;
    color: white;
}

.side-menu i{

    font-size: 20px;
    margin-left: 20px;
    color: white;
}


nav .menu-bar{

    float: right;
    margin-top: 20px;
    display: none;
    margin-right: 20px;
}

#menu{

    display: none;
}

.side-menu .Logout{

    display: none;
}



@media (max-width:850px){

    .side-menu a span{

        display: none;
    }

    .side-menu center{

        display: none;
    }

    .side-menu{

        width: 100px;

    }

    .side-menu a i{
  
         display: block;
        line-height: 80px;
        text-align: center;
        margin-left: 0;
        font-size: 35px;
        
    
    }

    .data{

        margin-left: 100px;
    }



}


@media (max-width:650px){

    .data{

        display: none;
    }

    nav ul{

        display: none;
    }


    .side-menu{

        width: 100%;
        text-align: center;
        left:100%;
        background-color: #4c516d;
        transition: all 0.5s;
    }

    .side-menu a i{

        display: none;
    }

    .side-menu a span{

        display: block;
    }

    .side-menu .Logout{

        display: block;
    }


    nav .menu-bar{

        display: block;
    }
}

#menu:checked ~ .side-menu{

    left:0;

}

Download Full Code : Click Here To Download Full Code

Keep Visiting 😁

Post a Comment

Post a Comment

About Us

Contact Form

How to create a responsive SideBar Menu using HTML & CSS only.

You might like

Post a Comment

Post a Comment

Contact Form