How to create a Sidebar Nav? What is Sidebar Nav?

 How to create a Sidebar Nav? What is Sidebar Nav?

How to create a Sidebar Nav? What is Sidebar Nav?


Hello, guys welcome to Code With Random blog, today we learn How to create a Sidebar Nav? What is Sidebar Nav? We learn topics like how to style a sidebar nav, transform, inline block, triggering and many more things about sidebars.

Q. What is Sidebar Nav?

In modern 2021 mobile-first design is first priority for a web developer/ web designer so Sidebar Nav is key feature of websites just like a normal websites has menu links and a hamburger buts it ease-out from a side of website or majority of developers use left side for create sidebar so if you want to be a perfect web developer so you need to know about how to create a significant sidebar nav so start todays project.

HTML Structure of Sidebar Nav:-

   <div class="s-layout">  
   <div class="s-layout__sidebar">  
     <a class="s-sidebar__trigger" href="#">  
       <i class="fa fa-bars"></i>  
     </a>  
     <nav class="s-sidebar__nav">  
       <ul>  
         <li>  
           <a class="s-sidebar__nav-link" href="#">  
             <i class="fa fa-home"></i><em>Home</em>  
           </a>  
         </li>  
         <li>  
           <a class="s-sidebar__nav-link" href="#">  
             <i class="fa fa-blog"></i><em>Blog</em>  
           </a>  
         </li>  
         <li>  
           <a class="s-sidebar__nav-link" href="#">  
             <i class="fa fa-user"></i><em>Contact</em>  
           </a>  
         </li>  
         <li>  
           <a class="s-sidebar__nav-link" href="#">  
             <i class="fa fa-info"></i><em>About</em>  
           </a>  
       </li>  
     </ul>  
   </nav>  
 </div>  
 <main class="s-layout__content">  
   <h1>Sidebar</h1>  
 </main>  
font-awesome link:- https://pro.fontawesome.com/releases/v5.10.0/css/all.css


Here we start our html code and start giving structure to site but first you need to link above link in your head then we start to create our structure we create a parent div using class s-layout, s denotes sidebar then we create multiple divs, ul for ordering the nav menu next we create li and anchor <a> tags then create main element its not usable but gives a better look in end after it you get output then we start our styling...

Output...

Our HTML Output 

Styling of Sidebar Nav:-

 /* Primary Styles */  
 *, *::before, *::after {  
   box-sizing: border-box;  
  }  
  body {  
   font-family: sans-serif;  
   font-size: 1em;  
   color: #333;  
  }  
  h1 {  
   font-size: 1.4em;  
  }  
  em {  
   font-style: normal;  
  }  
  a {  
   text-decoration: none;  
   color: inherit;  
  }   
  /* Layout */  
  .s-layout {  
   display: flex;  
   width: 100%;  
   min-height: 100vh;  
  }  
  .s-layout__content {  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   flex: 1;  
  }  
  /* Sidebar */  
  .s-sidebar__trigger {  
   z-index: 2;  
   position: fixed;  
   top: 0;  
   left: 0;  
   width: 100%;  
   height: 4em;  
   background: #000;  
  }  
  .s-sidebar__trigger > i {  
   display: inline-block;  
   margin: 1.5em 0 0 1.5em;  
   color: #ffff;  
  }  
  .s-sidebar__nav {  
   position: fixed;  
   top: 0;  
   left: -15em;  
   overflow: hidden;  
   transition: all .3s ease-in;  
   width: 15em;  
   height: 100%;  
   background: #007ff5;  
   color: rgba(255, 255, 255, 0.7);  
  }  
  .s-sidebar__nav:hover,  
  .s-sidebar__nav:focus,  
  .s-sidebar__trigger:focus + .s-sidebar__nav,  
  .s-sidebar__trigger:hover + .s-sidebar__nav {  
   left: 0;  
  }  
  .s-sidebar__nav ul {  
   position: absolute;  
   top: 4em;  
   left: 0;  
   margin: 0;  
   padding: 0;  
   width: 15em;  
  }  
  .s-sidebar__nav ul li {  
   width: 100%;  
  }  
  .s-sidebar__nav-link {  
   position: relative;  
   display: inline-block;  
   width: 100%;  
   height: 4em;  
  }  
  .s-sidebar__nav-link em {  
   position: absolute;  
   top: 50%;  
   left: 4em;  
   transform: translateY(-50%);  
  }  
  .s-sidebar__nav-link:hover {  
   background: #4d6276;  
  }  
  .s-sidebar__nav-link > i {  
   position: absolute;  
   top: 0;  
   left: 0;  
   display: inline-block;  
   width: 4em;  
   height: 4em;  
  }  
  .s-sidebar__nav-link > i::before {  
   position: absolute;  
   top: 50%;  
   left: 50%;  
   transform: translate(-50%, -50%);  
  }  

Styling gives us a awesome and targeted goal look for us so I hope you know about the basics of css like position, top, left, transform, inline-block, width, height, background or overflow etc. after we also do media-query styling for responsiveness.


Output...


Styling for Mobile First:-

 /* Mobile First */  
  @media (min-width: 42em) {  
   .s-layout__content {  
     margin-left: 4em;  
   }  
   /* Sidebar */  
   .s-sidebar__trigger {  
     width: 4em;  
   }  
   .s-sidebar__nav {  
     width: 4em;  
     left: 0;  
   }  
   .s-sidebar__nav:hover,  
   .s-sidebar__nav:focus,  
   .s-sidebar__trigger:hover + .s-sidebar__nav,  
   .s-sidebar__trigger:focus + .s-sidebar__nav {  
     width: 15em;  
   }  
  }  
  @media (min-width: 68em) {  
   .s-layout__content {  
     margin-left: 15em;  
   }  
   /* Sidebar */  
   .s-sidebar__trigger {  
     display: none  
   }  
   .s-sidebar__nav {  
     width: 15em;  
   }  
   .s-sidebar__nav ul {  
     top: 1.3em;  
   }  
  }  

If we need to create a mobile-first design so need to code some media queries using minimum 42 rem, 62 rem or doing some display, width, top or margin and this ready to get a look.

Final Output...



Hope you like this post and enjoy it. If we did any mistake please comment it down so this help full for also our users. Thank you for reading.

Written by Tushar Sharma
Team Codewith_Random

Post a Comment

Previous Post Next Post