Posted by admin at September 7, 2019
This is simple html and css responsive sidebar
Click on bellow Icon to see final result
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>
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;
}
}
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