Sidebars were first implemented by mobile apps. But now even websites are using slidebars for their menu or anything else. Phonegap apps also use sidebar. In this post I will show a simple way to create a slidebar.
View Demo
Implementing Menu Sidebar
<!doctype html>
<html style="padding: 0px; margin: 0px">
<head>
<title>Sidebar</title>
</head>
<body style="padding: 0px; margin: 0px;">
<img class="toggle" src="icon-mobile.png" onclick="toggle_sidebar()" style="position: fixed; right: 10px; top: 10px" />
<div id="sidebar" style="position: fixed; display: inline-block; top: 0px; height: 100%; width: 200px; left: -200px; background-color: black; transition: all 0.5s ease-in-out;">
sda
</div>
</body>
<script>
function toggle_sidebar()
{
var sidebar = document.getElementById("sidebar");
console.log(sidebar.style.left);
if(sidebar.style.left == "-200px")
{
sidebar.style.left = "0px";
}
else
{
sidebar.style.left = "-200px";
}
}
</script>
</html>
<html style="padding: 0px; margin: 0px">
<head>
<title>Sidebar</title>
</head>
<body style="padding: 0px; margin: 0px;">
<img class="toggle" src="icon-mobile.png" onclick="toggle_sidebar()" style="position: fixed; right: 10px; top: 10px" />
<div id="sidebar" style="position: fixed; display: inline-block; top: 0px; height: 100%; width: 200px; left: -200px; background-color: black; transition: all 0.5s ease-in-out;">
sda
</div>
</body>
<script>
function toggle_sidebar()
{
var sidebar = document.getElementById("sidebar");
console.log(sidebar.style.left);
if(sidebar.style.left == "-200px")
{
sidebar.style.left = "0px";
}
else
{
sidebar.style.left = "-200px";
}
}
</script>
</html>
