How to design a modern sidebar menu using HTML and CSS?

05 Mar, 2021
Sidebar menu is a component that is used for vertical navigation. It can be customized and made responsive by using simple HTML and CSS. To make a collapsing sidebar, you need to have HTML and CSS knowledge for creating it.
Example: In this example, first we will create a structure by using HTML after that we will decorate that structure by using CSS.
HTML File: In this file, we will design the structure of our modern side navbar, here we will not use any single line of CSS. We will do that after the structure is ready.HTMLHTML<!DOCTYPE html><html>  <head>    <!-- You can Include your CSS here-->  </head>  <body>    <div>      <!-- Div Header-->      <h2>GeeksforGeeks</h2>              <!-- Links in Div -->      <a href="#">        Data Structures      </a>      <a href="#">        Algorithms      </a>      <a href="#">        Interview Preparation      </a>      <a href="#">        Python      </a>      <a href="#"> Java </a>    </div>  </body></html>
HTML File: In this file, we will design the structure of our modern side navbar, here we will not use any single line of CSS. We will do that after the structure is ready.
HTML
<!DOCTYPE html><html>  <head>    <!-- You can Include your CSS here-->  </head>  <body>    <div>      <!-- Div Header-->      <h2>GeeksforGeeks</h2>              <!-- Links in Div -->      <a href="#">        Data Structures      </a>      <a href="#">        Algorithms      </a>      <a href="#">        Interview Preparation      </a>      <a href="#">        Python      </a>      <a href="#"> Java </a>    </div>  </body></html>
CSS File: This file contains all the CSS styling rules to create the custom animated sidebar. This file is used in the above HTML code.CSSCSS/* Sidebar Div */  div {    color: #fff;    width: 250px;    padding-left: 20px;    height: 100vh;    background-image: linear-gradient(30deg, #11cf4d, #055e21);    border-top-right-radius: 90px;  }    /* Div header */  div h2 {    padding: 40px 0 0 0;    cursor: pointer;  }    /* Div links */  div a {    font-size: 14px;    color: #fff;    display: block;    padding: 12px;    padding-left: 30px;    text-decoration: none;    outline: none;  }    /* Div link on hover */  div a:hover {    color: #56ff38;    background: #fff;    position: relative;    background-color: #fff;    border-top-left-radius: 22px;    border-bottom-left-radius: 22px;  }
CSS File: This file contains all the CSS styling rules to create the custom animated sidebar. This file is used in the above HTML code.
CSS
/* Sidebar Div */  div {    color: #fff;    width: 250px;    padding-left: 20px;    height: 100vh;    background-image: linear-gradient(30deg, #11cf4d, #055e21);    border-top-right-radius: 90px;  }    /* Div header */  div h2 {    padding: 40px 0 0 0;    cursor: pointer;  }    /* Div links */  div a {    font-size: 14px;    color: #fff;    display: block;    padding: 12px;    padding-left: 30px;    text-decoration: none;    outline: none;  }    /* Div link on hover */  div a:hover {    color: #56ff38;    background: #fff;    position: relative;    background-color: #fff;    border-top-left-radius: 22px;    border-bottom-left-radius: 22px;  }
Complete Solution: Here we will combine above sections HTML and CSS to create a perfect modern side bar menu.
HTML
<!DOCTYPE html><html>  <head>    <style>      /* Sidebar Div */      div {        color: #fff;        width: 250px;        padding-left: 20px;        height: 100vh;        background-image: linear-gradient(30deg, #11cf4d, #055e21);        border-top-right-radius: 90px;      }        /* Div header */      div h2 {        padding: 40px 0 0 0;        cursor: pointer;      }        /* Div links */      div a {        font-size: 14px;        color: #fff;        display: block;        padding: 12px;        padding-left: 30px;        text-decoration: none;        outline: none;      }        /* Div link on hover */      div a:hover {        color: #56ff38;        background: #fff;        position: relative;        background-color: #fff;        border-top-left-radius: 22px;        border-bottom-left-radius: 22px;      }      </style>  </head>  <body>    <div>      <!-- Div Header-->      <h2>GeeksforGeeks</h2>              <!-- Links in Div -->      <a href="#">        Data Structures      </a>      <a href="#">        Algorithms      </a>      <a href="#">        Interview Preparation      </a>      <a href="#">        Python      </a>      <a href="#"> Java </a>    </div>  </body></html>
CSS-Questions
CSS-Selectors
HTML-Questions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.