Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Difficulty Level : Easy
  • 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :