<
html
>
<
head
>
<
style
>
/*Position and style for the sidebar*/
.sidebar {
height: 100%;
width: 0;
position: fixed;
/*Stays in place */
background-color: green;
/*green*/
overflow-x: hidden;
/*for Disabling horizontal scroll */
}
/* Position and style for the sidebar links */
.sidebar a {
padding: 10px 10px 10px;
font-size: 25px;
color: #111;
display: block;
transition: 0.3s;
}
/* the links change color when mouse hovers upon them*/
.sidebar a:hover {
color: #FFFFFF;
}
/* Position and style the for cross button */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
}
/* Style for the sidebar button */
.openbtn {
font-size: 32px;
background-color: #008000;
color: #111;
padding: 10px 10px 10px;
border: none;
}
/* the sidebar button changes
color when mouse hovers upon it */
.openbtn:hover {
color: #FFFFFF;
}
/* pushes the page content to the right
when you open the side navigation */
#main {
transition: margin-left .5s;
/* If you want a transition effect */
padding: 10px;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"sidebar"
class
=
"sidebar"
>
<
a
href
=
"javascript:void(0)"
class
=
"closebtn"
onclick
=
"closeNav()"
>
×
</
a
>
<
a
href
=
"#"
>India</
a
>
<
a
href
=
"#"
>Nepal</
a
>
<
a
href
=
"#"
>Srilanka</
a
>
<
a
href
=
"#"
>Myanmar</
a
>
</
div
>
<
div
id
=
"main"
>
<
button
class
=
"openbtn"
onclick
=
"openNav()"
>
SIDEBAR
</
button
>
</
div
>
</
body
>
<
script
>
/* Sets the width of the sidebar
to 250 and the left margin of the
page content to 250 */
function openNav() {
document.getElementById(
"sidebar").style.width = "250px";
document.getElementById(
"main").style.marginLeft = "250px";
}
/* Set the width of the sidebar
to 0 and the left margin of the
page content to 0 */
function closeNav() {
document.getElementById(
"sidebar").style.width = "0";
document.getElementById(
"main").style.marginLeft = "0";
}
</
script
>
</
html
>