Skip to content
Related Articles

Related Articles

How to design a modern sidebar menu using HTML and CSS?
  • Last Updated : 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.

    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.



    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>


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :