<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>