Simple HTML CSS Responsive SideBar

Simple HTML CSS Responsive SideBar

Posted by admin at September 7, 2019

This is simple html and css responsive sidebar

Click on bellow Icon to see final result

Hello This is Heading of Sidebar Example

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore modi perspiciatis ipsam dolor, quas, accusamus at veniam voluptatum ducimus ullam totam aperiam officia nihil error recusandae reiciendis magnam quam! Nisi officia vero et, in modi impedit molestias reprehenderit molestiae aperiam at recusandae nihil? Nesciunt commodi officiis, explicabo autem voluptatibus amet.

Step 1: Create HTML File

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Side Navigation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="sidenav" id="mySideNav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
        >×</a
      >
      <a href="">Home</a>
      <a href="">About</a>
      <a href="">Contact</a>
      <a href="">FAQ</a>
    </div>
    <span onclick="openNav()" class="menuIcon">☰</span>

    <div id="main">
      <h2>Hello This is main page of the site</h2>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore modi
        perspiciatis ipsam dolor, quas, accusamus at veniam voluptatum ducimus
        ullam totam aperiam officia nihil error recusandae reiciendis magnam
        quam! Nisi officia vero et, in modi impedit molestias reprehenderit
        molestiae aperiam at recusandae nihil? Nesciunt commodi officiis,
        explicabo autem voluptatibus amet.
      </p>
    </div>
   <script src="main.js"></script>
  </body>
</html>

Step 2 : Create CSS File

style.css

.sidenav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 1;
  width: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s ease;
}
.sidenav a {
  padding: 10px 15px;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  transition: 0.5s ease-in;
  display: block;
}
.sidenav a:hover {
  color: #f1ff1f;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 30px;
  margin-left: 50px;
}
#main {
  transition: margin-left 0.5s;
  padding: 20px;
}
.menuIcon{
  font-size: 25px;
  padding: 10px;
  color: #444;
  font-weight: 800;
  cursor: pointer;
}
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

Step 3: Create JavaScript file

main.js

 function openNav() {
        document.getElementById("mySideNav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";

      }
      function closeNav() {
        document.getElementById("mySideNav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
      }


Comments

Write a Reply or Comment

Your email address will not be published. Required fields are marked *