Hello Friends, Today in this post, we’ll learn how to Create a Responsive Dashboard Sidebar Menu Using HTML CSS And JAVASCRIPT. recently I have shared a Top 5 Amazing CSS Generators For Web Developers | Free CSS Generator Websites. but our today’s topic is Responsive Dashboard Sidebar Menu Using HTML CSS And JAVASCRIPT.

As you all know Responsive Sidebar Menu with Submenu on your website can be very helpful for your site visitors. You can place navigation menus or display some important information in the sidebar section. Placing navigation menus in a sidebar will allow your visitors to quickly navigate from one page to another page on your website.

In this section, you can display your contact information so that your potential customers can quickly find it and can easily contact you. This can increase your sales. A sidebar may also increase site engagement if you provide appropriate links in this section.

However, at a certain event the desired goal the pages must work in require together with the fluently resizing material location an additional area of the obtainable screen width to get assigned to a still vertical component with certain links and content inside it– in other words.

If you are a beginner in the designing field you may have tried to build such a sidebar. Didn’t get the best result? don’t worry! In this article, you’ll know the basic concept to create a responsive navbar with a search box.

This is a Responsive Sidebar Menu with Submenu based navbar project that comes with a search box, dropdown, and hamburger image icon. As you already know, menus are lists of links and, as such, it is standard practice to mark them up as. Sub-menu are a common component of modern (and not so modern) web design.

Using JavaScript one can style the upper level of a navigation menu any which way, and hide the sub-levels so that they are revealed only when the visitor hovers on the appropriate area.

Play Video

Many designers are satisfied with leaving like that. However, from a UX/UI point of view, this is lacking as it leaves the user having to explore the entire menu to find which sections contain additional navigation links. This means visitors will either waste their time looking and get frustrated for doing so or miss areas of your site altogether! That’s no good at all.

The common way to address this issue is to simply add a class to the <li> that contain <ul> (sub-menus) so that we can style those items differently from those that do not contain sub-navigation. Pretty simple, but also pretty tedious and not particularly graceful.

Another way, assuming that upper-level items are not coded as links, is to use that difference in tags as leverage. That is, create faux links: style <span>s that’s are direct children of the <li> to indicate that there are more links that follow and, by contrast, style anchor tags as not having additional sub-items.

This is handy if your drop-down is simple and you can structure it specifically that way. It’s cleaner in that you don’t have to add “submenu” classes to your markup but, just as before, it still requires that you structure the content of your list manually or that your CMS can foretell which list items will contain other <ul> sub-menus.

Web design aims at planning and designing a website. It includes everything from information architecture, navigations, and layouts to graphics, fonts, and color combinations.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

HTML

<!DOCTYPE html> 
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Responsive Sidebar Menu  | Code4education </title>
    <link rel="stylesheet" href="style.css">
    
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
   <div class="sidebar">
     <div class="logo_content">
       <div class="logo">
         <div class="logo_name">Code4education</div>
       </div>
       <i class='bx bx-menu' id="btn"></i>
     </div>
     <ul class="nav_list">
       <li>
          <i class='bx bx-search'></i>
          <input type="text" placeholder="Search...">
          <span class="tooltip">Search</span>
       </li>
       <li>
        <a href="#">
         <i class='bx bx-grid-alt'></i>
         <span class="links_name">Dashboard</span>
        </a>
        <span class="tooltip">Dashboard</span>
      </li>
       <li>
         <a href="#">
          <i class='bx bx-user'></i>
          <span class="links_name">User</span>
         </a>
         <span class="tooltip">User</span>
       </li>
       <li>
        <a href="#">
         <i class='bx bx-chat'></i>
         <span class="links_name">Messages</span>
        </a>
        <span class="tooltip">Messages</span>
      </li>
      <li>
        <a href="#">
         <i class='bx bx-pie-chart-alt-2'></i>
         <span class="links_name">Analytics</span>
        </a>
        <span class="tooltip">Analytics</span>
      </li>
      <li>
        <a href="#">
         <i class='bx bx-folder'></i>
         <span class="links_name">File Manager</span>
        </a>
        <span class="tooltip">File Manager</span>
      </li>
      <li>
        <a href="#">
         <i class='bx bx-cart-alt'></i>
         <span class="links_name">Order</span>
        </a>
        <span class="tooltip">Order</span>
      </li>
      <li>
        <a href="#">
         <i class='bx bx-heart'></i>
         <span class="links_name">Saved</span>
        </a>
        <span class="tooltip">Saved</span>
      </li>
      <li>
        <a href="#">
         <i class='bx bx-cog'></i>
         <span class="links_name">Setting</span>
        </a>
        <span class="tooltip">Setting</span>
      </li>
     </ul>
     <div class="content">
       <div class="user">
         <div class="user_details">
           <img decoding="async" src="images/profile.jpg" alt="">
           <div class="name_job">
             <div class="name">Bhaskar Gupta</div>
             <div class="job">Web Designer</div>
           </div>
         </div>
         <i class='bx bx-log-out' id="log_out"></i>
       </div>
     </div>
   </div>
   <div class="home_content">
     <div class="text">Dashboard</div>
     <p>Nullam vulputate ultrices tellus et bibendum. Integer iaculis pharetra ligula, eget condimentum nunc malesuada nec. Nullam eu lorem sed tellus condimentum aliquam in in eros. Maecenas sagittis, justo quis blandit aliquet, sem felis interdum elit, ac dictum purus mauris nec mauris. In hac habitasse platea dictumst. Morbi placerat nec lorem in feugiat. In tristique laoreet diam, vel vulputate mi placerat id. Vivamus at quam rutrum, finibus tortor laoreet, venenatis sem. Nam vitae libero ultrices, tristique ligula non, sagittis elit. Vestibulum sed turpis nec eros convallis viverra. Maecenas nunc arcu, pharetra bibendum feugiat ut, consequat quis massa. Vivamus aliquet eros a efficitur fringilla. Aenean auctor ut mi ut vestibulum. Suspendisse a turpis id nisi faucibus efficitur. Sed ipsum urna, ultricies eget justo vitae, hendrerit malesuada mauris. Donec a turpis malesuada, euismod massa id, ultrices ex.
    </p>
    <p>Nullam vulputate ultrices tellus et bibendum. Integer iaculis pharetra ligula, eget condimentum nunc malesuada nec. Nullam eu lorem sed tellus condimentum aliquam in in eros. Maecenas sagittis, justo quis blandit aliquet, sem felis interdum elit, ac dictum purus mauris nec mauris. In hac habitasse platea dictumst. Morbi placerat nec lorem in feugiat. In tristique laoreet diam, vel vulputate mi placerat id. Vivamus at quam rutrum, finibus tortor laoreet, venenatis sem. Nam vitae libero ultrices, tristique ligula non, sagittis elit. Vestibulum sed turpis nec eros convallis viverra. Maecenas nunc arcu, pharetra bibendum feugiat ut, consequat quis massa. Vivamus aliquet eros a efficitur fringilla. Aenean auctor ut mi ut vestibulum. Suspendisse a turpis id nisi faucibus efficitur. Sed ipsum urna, ultricies eget justo vitae, hendrerit malesuada mauris. Donec a turpis malesuada, euismod massa id, ultrices ex.
    </p>
    <p>Nullam vulputate ultrices tellus et bibendum. Integer iaculis pharetra ligula, eget condimentum nunc malesuada nec. Nullam eu lorem sed tellus condimentum aliquam in in eros. Maecenas sagittis, justo quis blandit aliquet, sem felis interdum elit, ac dictum purus mauris nec mauris. In hac habitasse platea dictumst. Morbi placerat nec lorem in feugiat. In tristique laoreet diam, vel vulputate mi placerat id. Vivamus at quam rutrum, finibus tortor laoreet, venenatis sem. Nam vitae libero ultrices, tristique ligula non, sagittis elit. Vestibulum sed turpis nec eros convallis viverra. Maecenas nunc arcu, pharetra bibendum feugiat ut, consequat quis massa. Vivamus aliquet eros a efficitur fringilla. Aenean auctor ut mi ut vestibulum. Suspendisse a turpis id nisi faucibus efficitur. Sed ipsum urna, ultricies eget justo vitae, hendrerit malesuada mauris. Donec a turpis malesuada, euismod massa id, ultrices ex.
    </p>
    <p>Nullam vulputate ultrices tellus et bibendum. Integer iaculis pharetra ligula, eget condimentum nunc malesuada nec. Nullam eu lorem sed tellus condimentum aliquam in in eros. Maecenas sagittis, justo quis blandit aliquet, sem felis interdum elit, ac dictum purus mauris nec mauris. In hac habitasse platea dictumst. Morbi placerat nec lorem in feugiat. In tristique laoreet diam, vel vulputate mi placerat id. Vivamus at quam rutrum, finibus tortor laoreet, venenatis sem. Nam vitae libero ultrices, tristique ligula non, sagittis elit. Vestibulum sed turpis nec eros convallis viverra. Maecenas nunc arcu, pharetra bibendum feugiat ut, consequat quis massa. Vivamus aliquet eros a efficitur fringilla. Aenean auctor ut mi ut vestibulum. Suspendisse a turpis id nisi faucibus efficitur. Sed ipsum urna, ultricies eget justo vitae, hendrerit malesuada mauris. Donec a turpis malesuada, euismod massa id, ultrices ex.
    </p>
   </div>

CSS

/* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
:root{
    --black-color:#11101d;
    --white-color:#fff;
    --sky-color:#E4E9F7;
    --light-black:#1d1b31;
}
body{
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}
::selection{
  color:var(--white-color);
  background: var(--black-color);
} 
.sidebar{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:78px;
  background:var(--black-color);
  padding:6px 14px;
  z-index:99;
  transition:all 0.5s ease;
}
.sidebar.active{
  width:240px;
}
.sidebar .logo_content .logo{
  color:var(--white-color);
  display: flex;
  height:50px;
  width:100%;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition:all 0.5s ease;
}
.sidebar.active .logo_content .logo{
  opacity:1;
  pointer-events: none;
}
.logo_content .logo .logo_name{
  font-size: 20px;
  font-weight: 400;
}
.sidebar #btn{
  position:absolute;
  color:var(--white-color);
  top:6px;
  left:50%;
  font-size: 22px;
  height:50px;
  width:50px;
  text-align: center;
  line-height: 50px;
  transform: translateX(-50%);
  cursor: pointer;
}
.sidebar.active #btn{
  left:90%;
}
.sidebar ul{
  margin-top:20px;
}
.sidebar ul li{
  position:relative;
  height:50px;
  width:100%;
  margin:5px 0;
  list-style: none;
  line-height: 50px;
}
.sidebar ul li .tooltip{
  position:absolute;
  left:125px;
  top:0;
  transform:translate(-50%, -50%);
  border-radius: 6px;
  height:35px;
  width:120px;
  background: var(--white-color);
  line-height: 35px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transition:0s;
  opacity:0;
  pointer-events: none;
  display:block;
}
.sidebar ul li .tooltip::before{
  content:'';
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-right:10px solid var(--white-color);
  position:absolute;
  left:-8px;
  top:7px;
}
.sidebar.active ul li .tooltip{
  display:none;
}
.sidebar ul li:hover .tooltip{
  transition:all 0.5s ease;
  opacity:1;
  top:50%;
}
.sidebar ul li input{
  position:absolute;
  height:100%;
  width:100%;
  left:0;
  top:0;
  border-radius: 12px;
  outline:none;
  border:none;
  background: #1d1b31;
  padding-left:50px;
  font-size: 18px;
  color:var(--white-color);
}
.sidebar ul li .bx-search{
  position:relative;
  z-index: 99;
  color:var(--white-color);
  font-size: 22px;
  transition:all 0.5s ease;
}
.sidebar ul li .bx-search:hover{
  background:var(--white-color);
  color:#1d1b31;
}
.sidebar ul li a{
  color:var(--white-color);
  display:flex;
  align-items:center;
  text-decoration: none;
  border-radius: 12px;
  white-space: nowrap;
  transition:all 0.4s ease;
}

.sidebar ul li a:hover{
  color:var(--black-color);
  background:var(--white-color);
}
.sidebar ul li i{
  font-size: 18px;
  font-weight: 400;
  height:50px;
  min-width: 50px;
  border-radius: 12px;
  line-height: 50px;
  text-align: center;
}
.sidebar .links_name{
  font-size: 15px;
  font-weight: 400;
  opacity:0;
  pointer-events: none;
  transition:all 0.3s ease;
}
.sidebar.active .links_name{
  transition:0s;
  opacity:1;
  pointer-events: auto;
}
.sidebar .content{
  position:absolute;
  color:var(--white-color);
  bottom:0;
  left:0;
  width:100%;
}
.sidebar .content .user{
  position:relative;
  padding:10px 6px;
  height:60px;
  background: none;
  transition:all 0.4s ease;
}
.sidebar.active .content .user{
  background:var(--light-black);
}
.content .user .user_details{
  display:flex;
  align-items:center;
  opacity:0;
  pointer-events: none;
  white-space: nowrap;
  transition:all 0.4s ease;
}
.sidebar.active .user .user_details{
  opacity:1;
  pointer-events: auto;
}
.content .user .user_details img{
  height:45px;
  width:45px;
  object-fit: cover;
  border-radius: 12px;
}
.name_job{
  margin-left:10px;
}
 .user_details .name{
  font-size: 15px;
  font-weight: 400;
}
 .user_details .job{
  font-size: 12px; 
}
 #log_out{
  position:absolute;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
  min-width: 50px;
  line-height: 50px;
  font-size: 20px;
  border-radius: 12px;
  text-align: center;
  transition:all 0.4s ease;
}
.sidebar.active .user #log_out{
  left:80%;
  background:none;
}
.home_content{
  position:absolute;
  height:100%;
  width:calc(100% - 78px);
  left:78px;
  background:var(--sky-color);
  padding:20px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transition:all 0.5s ease;
}
.sidebar.active ~ .home_content{
  z-index:100;
  width:calc(100% - 240px);
  left:240px;
}
.home_content .text{
  font-size: 25px;
  font-weight: 600;
  color:var(--light-black);
  margin-bottom:15px;
}
.home_content p{
  margin-bottom:15px;
}

Responsive Dashboard Sidebar Menu Using HTML CSS And JAVASCRIPT.

HTML

CSS

JS

One thought on “Responsive Dashboard Sidebar Menu Using HTML CSS And JAVASCRIPT.”

Leave a Reply Cancel reply

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript