Home Menus Fixed Sidebar Menu HTML CSS – How To

Fixed Sidebar Menu HTML CSS – How To

1812
0
Next Coding,fixed sidebar ,fixed sidebar menu html css

Fixed Sidebar Menu HTML CSS

In Today post I will show you, how to create a SideBar Menu using HTML & CSS only.

The sidebar allows the user to navigate different sections or pages on the webpage of information to the right side or left side of a website. Which have links to help the user to move various site within the webpage and makes it easier for users? The sidebar became an essential part of the web pages.

In this video tutorial [Side Bar Menu], we are going to link the button along with icons at the left top side corner of the webpage, also with hover effect when the button is hovered nice effects appear. And an animation effect will also be added to the link to make animate nice.

Here is the full video tutorial that will show step by step how to create a Side Bar Menu using HTML & CSS

In the video tutorial, I will be using pure HTML and CSS only to write the code. So if you’re a beginner, then you can easily understand the codes of this program and be able to create this type of sidebar menu.

I will also share the code below so you can see and follow along with the video tutorial

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fixed Sidebar Menu Html CSS</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="sidebar">
      <h2>Next</h2>
      <ul class="nav">
        <li>
          <a href="#">
            <i class="fas fa-server"></i>
            <span>Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fas fa-concierge-bell"></i>
            <span>Services</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fas fa-calendar-alt"></i>
            <span>Events</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fas fa-cog"></i>
            <span>Setting</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fas fa-question-circle"></i>
            <span>About</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fas fa-address-card"></i>
            <span>Contact</span>
          </a>
        </li>
      </ul>
    </div>

    <div class="main">
      <!-- <h2>Fixed Sidebar Menu Html CSS</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
        natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
        quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
        dolores illum?
      </p>

      <h2>Fixed Sidebar Menu Html CSS</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
        natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
        quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
        dolores illum?
      </p>
      <h2>Fixed Sidebar Menu Html CSS</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
        natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
        quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
        dolores illum?
      </p>
      <h2>Fixed Sidebar Menu Html CSS</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
        natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
        quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
        dolores illum?
      </p>
      <h2>Fixed Sidebar Menu Html CSS</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
        natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
        quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
        dolores illum?
      </p>
      <h2>Fixed Sidebar Menu Html CSS</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
        natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
        quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
        dolores illum?
      </p>
      <h2>Fixed Sidebar Menu Html CSS</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
        natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
        quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
        dolores illum?
      </p>
      <h2>Fixed Sidebar Menu Html CSS</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sint
        natus. Quibusdam consequatur natus, excepturi, temporibus quaerat aut
        quae quam quis officiis corporis fugiat hic sed? Voluptatem omnis
        dolores illum?
      </p> -->
    </div>
  </body>
</html>

CSS

/* colors
 #ED1C5B; light 
 #E20E4E; dark
*/

/* reset */
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body{
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sidebar start here  */
.sidebar{
    position: fixed;
    background: #ED1C5B;
    width: 200px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.sidebar h2{
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    color: #ffffff;
    background: #E20E4E;
    padding: 20px;
    font-weight: bold;
}


.sidebar ul li {
    margin: 25px 0;
}

.sidebar ul li a{
    color: #ffffff;
    padding: 0 30px;

}
.sidebar ul li a:hover{
    color: #000000;
    margin-left: 20px;
    transition: 0.4s;
}

/* Sidebar end Here  */

/* Main Content Section Start Here  */

.main{
    margin-left: 200px;
    padding: 5px;
}

.main h2{
    margin-top: 20px;
}

(Visited 2,969 times, 1 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here