Overview:
In this article, we are going to discuss how to create a sidebar. In this article, we are going to see how to open and hide the sidebar again using open and close buttons. We have created this webpage using HTML, CSS and JavaScript. Let's now take a look at the all codes. The first part of the webpage is the paragraph and the second part is the menu bar which will collapsed from the left side of the webpage.
The sidebar contains:
- A menu of eight items aligned to the left which are hidden till we not click on open- sidebar button.
- The 8th item in the menu is the cancel/close button to close the sidebar.
Let’s look at the part of the code of the webpage from our index.html file. Below is the portion of code of the overall webpage including the JavaScript code in the <script> tag.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>SideBar</title>
</head>
<body>
<div class="wrapper" id="wrapper">
<div id ="mySidebar" class="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">About</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#"></i>Map</a></li>
<li><a href="#" onclick="closeSideBar()"><b> × </b></a></li>
</ul>
</div>
</div>
<div id="main_content" class="main_content">
<a href="#content" onclick="openSideBar()"> ☰ <b>Open SideBar</b></a>
<p>This is the collapsed SideBar using HTML and Javascript. We have used CSS for designing(color, font-size and font-family, etc).<br>
This creates an amazing look to our webpage. We have creted to functions in Javascript openSideBar() and closeSideBar().
</p>
</div>
<script>
function openSideBar(){
document.getElementById("mySidebar").style.width="250px";
document.getElementById("main_content").style.marginLeft="250px";
}
function closeSideBar(){
document.getElementById("mySidebar").style.width="0";
document.getElementById("main_content").style.marginLeft="0";
}
</script>
</body>
</html>
Output:
Comments
Post a Comment