Sidebar Menu Dashboard Template UI | Side Navigation Bar - Only Using CSS and HTML | Coding Snow | Creative Web Design Tutorials

Description

Watch Part-02Responsive Sidebar Menu Dashboard Template UI

Hello everyone! In this video, you are going to learn how to design a Sidebar Menu with a header area for a dashboard template only using HTML and CSS. This sidebar is very attractive and easy to navigate through it. You can expand and collapse the sidebar using the menu button on the header area. This Sidebar includes a profile picture, a profile name, and menu items. Let's see how to design this sidebar.

First, create the index.html file and the style.css file. Then start to code the header area and the sidebar HTML part in the index.html file with including the profile picture. Also, link the font awesome libraries in between <head></head> tags to add the font awesome icons to the menu items. After the HTML part is complete link the style.css file in between <head></head> tags. Then go to the style.css file and start the styling part of the sidebar as you can see in the video. The important part of this design is the input check box and the label with the menu button. You are going to use this input checkbox and the label with the menu button to collapse and expand the sidebar. Hope this tutorial will be helpful for you to create an attractive sidebar like this one.

All the source codes and source files and available to download from here. Use the download button or copy and paste the code from the text editors. My opinion is first try to do it by following the video line by line. It will help you to understand all of it. After that, if your code is wrong or not working use the given source codes to compare with your code. It will help you to understand all of your mistakes.

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Sidebar Dashboard Template</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
  </head>
  <body>

<input type="checkbox" id="check">
    
    <header>
      <label for="check">
        <i class="fas fa-bars" id="sidebar_btn"></i>
      </label>
      <div class="left_area">
        <h3>Coding <span>Snow</span></h3>
      </div>
      <div class="right_area">
        <a href="#" class="logout_btn">Logout</a>
      </div>
    </header>
    
    
    <div class="sidebar">
      <center>
        <img src="1.png" class="profile_image" alt="">
        <h4>Jessica</h4>
      </center>
      <a href="#"><i class="fas fa-desktop"></i><span>Dashboard</span></a>
      <a href="#"><i class="fas fa-cogs"></i><span>Components</span></a>
      <a href="#"><i class="fas fa-table"></i><span>Tables</span></a>
      <a href="#"><i class="fas fa-th"></i><span>Forms</span></a>
      <a href="#"><i class="fas fa-info-circle"></i><span>About</span></a>
      <a href="#"><i class="fas fa-sliders-h"></i><span>Settings</span></a>
    </div>

</body>
</html>

style.css

body{
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

header{
  position: fixed;
  background: #22242A;
  padding: 20px;
  width: 100%;
  height: 30px;
}

.left_area h3{
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  font-size: 22px;
  font-weight: 900;
}

.left_area span{
  color: #19B3D3;
}

.logout_btn{
  padding: 5px;
  background: #19B3D3;
  text-decoration: none;
  float: right;
  margin-top: -30px;
  margin-right: 40px;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  transition: 0.5s;
  transition-property: background;
}

.logout_btn:hover{
  background: #0B87A6;
}

.sidebar {
  background: #2f323a;
  margin-top: 70px;
  padding-top: 30px;
  position: fixed;
  left: 0;
  width: 250px;
  height: 100%;
  transition: 0.5s;
  transition-property: left;
}

.sidebar .profile_image{
  width: 100px;
  height: 100px;
  border-radius: 100px;
  margin-bottom: 10px;
}

.sidebar h4{
  color: #ccc;
  margin-top: 0;
  margin-bottom: 20px;
}

.sidebar a{
  color: #fff;
  display: block;
  width: 100%;
  line-height: 60px;
  text-decoration: none;
  padding-left: 40px;
  box-sizing: border-box;
  transition: 0.5s;
  transition-property: background;
}

.sidebar a:hover{
  background: #19B3D3;
}

.sidebar i{
  padding-right: 10px;
}

label #sidebar_btn{
  z-index: 1;
  color: #fff;
  position: fixed;
  cursor: pointer;
  left: 300px;
  font-size: 20px;
  margin: 5px 0;
  transition: 0.5s;
  transition-property: color;
}

label #sidebar_btn:hover{
  color: #19B3D3;
}

#check:checked ~ .sidebar{
  left: -190px;
}

#check:checked ~ .sidebar a span{
  display: none;
}

#check:checked ~ .sidebar a{
  font-size: 20px;
  margin-left: 170px;
  width: 80px;
}

.content{
  margin-left: 250px;
  background: url(background.png) no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  transition: 0.5s;
}

#check:checked ~ .content{
  margin-left: 60px;
}

#check{
  display: none;
}

Download Source Files

If the download didn't start automatically, click here.

Wednesday, January 13, 2021

Sidebar Menu Dashboard Template UI | Side Navigation Bar - Only Using CSS and HTML

Description

Source Codes

index.html

style.css

Post a Comment

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, January 13, 2021

Sidebar Menu Dashboard Template UI | Side Navigation Bar - Only Using CSS and HTML

Description

Source Codes

index.html

style.css

Post a Comment

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form