How to create a sidebar
To create a sidebar using JavaScript, you can manipulate the HTML and CSS dynamically. Here's an example of how to create a sidebar with JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Sidebar Example</title>
<style>
/* CSS for the sidebar */
.sidebar {
width: 200px;
background-color: #f1f1f1;
height: 100%;
position: fixed;
left: 0;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* CSS for the main content */
.content {
margin-left: 200px; /* Same width as the sidebar */
padding: 16px;
}
</style>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
<!-- Main Content -->
<div class="content">
<h1>Content Goes Here</h1>
<p>This is the main content area.</p>
</div>
<script>
// JavaScript to handle sidebar functionality
function openSidebar() {
document.getElementsByClassName("sidebar")[0].style.width = "200px";
document.getElementsByClassName("content")[0].style.marginLeft = "200px";
}
function closeSidebar() {
document.getElementsByClassName("sidebar")[0].style.width = "0";
document.getElementsByClassName("content")[0].style.marginLeft = "0";
}
</script>
</body>
</html>In the example above, we have a sidebar defined as a `<div>` element with the `sidebar` class. It contains some `<a>` tags that represent the links in the sidebar. The main content area is defined as a separate `<div>` element with the `content` class.
The CSS styles define the appearance and positioning of the sidebar and content. The sidebar has a fixed position on the left side (`position: fixed; left: 0; top: 0;`), a width of 200 pixels, and a background color of #f1f1f1. The content has a left margin equal to the width of the sidebar to create space for it (`margin-left: 200px;`).
In the JavaScript section, we define two functions: `openSidebar()` and `closeSidebar()`. These functions manipulate the CSS properties of the sidebar and content elements to open and close the sidebar.
To use the sidebar, you can call the `openSidebar()` function when you want to open it and the `closeSidebar()` function when you want to close it. For example, you can add a button or link with an `onclick` attribute to trigger these functions.
Save the HTML file and open it in a web browser. Clicking the "Link 1" or "Link 2" in the sidebar will open the corresponding page in the `content` area.
Output:
About the Author
Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.
We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc
PreviousNext
Join our newsletter for the latest updates.
About us
Our Services
Contact Us
Our Courses
Learn Python | Learn AI | Learn Machine Learning | Learn Deep Learning | Learn Core Java | Learn Java JSP | Learn Java Servlet | Learn Java Spring Core | Learn Spring Boot | Learn Power BI | Learn DAA | Learn HTML | Learn SQL | Learn C Programming | Learn Bootstrap | Learn Git | Learn JavaScript | Learn Data Structure Using C | Learn RDBMS | Learn Data Science | Learn PHP
Our Tutorials
Python Tutorial | AI Tutorial | Machine Learning Tutorial | Deep Learning Tutorial | Core Java Tutorial | Java JSP Tutorial | Java Servlet Tutorial | Java Spring Tutorial | Spring Boot Tutorial | Power BI Tutorial | DAA Tutorial | HTML Tutorial | SQL Tutorial | C Programming Tutorial | Bootstrap Tutorial | Git Tutorial | JavaScript Tutorial | Data Structure Using C Tutorial | RDBMS Tutorial | Data Science Tutorial | PHP Tutorial
Copyright © 2023 Pythontpoint Powered by Silan Software Pvt. Ltd. All rights reserved.