<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
style
>
/* The sidebar menu */
.sidebar {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width */
position: fixed;
/* Fixed place */
z-index: 1;
/* Stay on top */
top: 0;
left: 0;
background-color: black;
/* Disable horizontal scroll */
overflow-x: hidden;
/* Place content 60px from the top */
padding-top: 60px;
/* Transition effect to slide
in the sidebar */
transition: 0.5s;
}
/* The sidebar links */
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
transition: 0.3s;
}
/* Mouse over the navigation
links, to change their color */
.sidebar a:hover {
color: green;
}
/* Position and style the close
button at top right corner */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* The button used to open the sidebar */
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
/* Style page content - pushes the
page content to the right when the
sidebar is opened */
#main {
/* If you want a transition effect */
transition: margin-left 0.5s;
padding: 20px;
}
/* On smaller screens, where height is
less than 450px, change the style of
the side-nav (less padding and a
smaller font size) */
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"mySidebar"
class
=
"sidebar"
>
<
a
href
=
"javascript:void(0)"
class
=
"closebtn"
onclick
=
"closeNav()"
>
×
</
a
>
<
a
href
=
"#"
>My Account</
a
>
<
a
href
=
"#"
>My Articles</
a
>
<
a
href
=
"#"
>Interests</
a
>
<
a
href
=
"#"
>Practice</
a
>
<
a
href
=
"#"
>Testimonials</
a
>
<
a
href
=
"#"
>About Us</
a
>
<
a
href
=
"#"
>Contact Us</
a
>
</
div
>
<
div
id
=
"main"
>
<
h1
style
=
"color: green;"
>
Welcome to GeeksForGeeks
</
h1
>
<
button
class
=
"openbtn"
onclick
=
"openNav()"
>Menu
</
button
>
<
h2
>
This is a demonstration of collapsed
sidebar by default. The sidebar opens
on clicking the Menu button.
</
h2
>
</
div
>
<
script
>
function openNav() {
document.getElementById(
"mySidebar").style.width = "200px";
document.getElementById(
"main").style.marginLeft = "200px";
}
/* Set the width of the sidebar to 0
and the left margin of the page content to 0 */
function closeNav() {
document.getElementById(
"mySidebar").style.width = "0";
document.getElementById(
"main").style.marginLeft = "0";
}
</
script
>
</
body
>
</
html
>