Home Menus Fixed Sidebar Menu HTML CSS – How To

Fixed Sidebar Menu HTML CSS – How To

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

Fixed Sidebar Menu HTML CSS – How To

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 32 times, 1 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here