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";
}
Related
Comments