- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a collapsible sidepanel menu with CSS and JavaScript?
A collapsible panel is a basic container coach view that creates a section area that can contain other controls. This section can be lengthy or collapsed to show hide data.
To create a collapsible sidepanel menu we need HTML, CSS, and JavaScript. A collapsible sidepanel will collapse over on the main page. It means the menu bar comes on the page with their respective width and hides the main content of the page with its width; or you will display none for the main content.
In this example, we are creating a webpage displaying the “collapsible sidpanel menu”. A menu with 4 links will appear after a click.
Example.html
Create an HTML file in which we will define the structure (view) of the page. In this example Using the HTML code we are creating the current page with required the text, a collapsible sidepanel menu, and empty navigation Links for the menu.
<div id="content"> <button class="openbtn" id="openbtn" onclick="show()">☰</button> <h2>Collapsed Sideber</h2> <p> Click on the menu/bar icon to open the sidebar, and it will automatically push this content to the right. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus velit fuga accusamus quo placeat cumque iusto. Molestias soluta numquam, dolore debitis consequuntur, magni expedita repellendus amet, eaque exercitationem adipisci. Enim. </p> </div>
Example.css
Add CSS style to give a hover effect on the collapsible sidepanel menu for a better look. In this example, we are styling the collapsible sidepanel if hovering over the link background color will be changed.
<style> body { font-family: "Lato", sans-serif; } .sidebar { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidebar a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidebar a:hover { color: #f1f1f1; } .sidebar .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .openbtn { font-size: 20px; cursor: pointer; color: black; padding: 10px 15px; border: none; } .openbtn:hover { background-color: #444; } #content { transition: margin-left 0.5s; padding: 16px; } /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidebar { padding-top: 15px; } .sidebar a { font-size: 18px; } } </style>
Example.js
Using Javascript we can perform validation and the handle event on the page. In this example, creating the show and hide buttons. The navigation will be opened by clicking on the menu bar button, and closed by clicking the cross button. If the collapsible sidepanel is opened, then the main content of the page will disappear.
Let’s see tha javascript code for a better understanding −
<script> function show() { document.getElementById("mySidebar").style.width = "230px"; document.getElementById("content").style.display = "none"; } function hide() { document.getElementById("mySidebar").style.width = "0"; document.getElementById("content").style.display = "block"; } </script>
Complete Example
Let’s see a complete example to create a collapsible sidepanel with the help of CSS, HTML, and Javascript.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Lato", sans-serif; } .sidebar { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidebar a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidebar a:hover { color: #f1f1f1; } .sidebar .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .openbtn { font-size: 20px; cursor: pointer; color: black; padding: 10px 15px; border: none; } .openbtn:hover { background-color: #444; } #content { transition: margin-left 0.5s; padding: 16px; } /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidebar { padding-top: 15px; } .sidebar a { font-size: 18px; } } </style> </head> <body> <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="hide()">×</a> <a href="#">Tutorials</a> <a href="#">AboutUs</a> <a href="#">Career</a> <a href="#">ContactUs</a> </div> <div id="content"> <button class="openbtn" id="openbtn" onclick="show()">☰</button> <h2>Collapsed Sideber</h2> <p> Click on the menu/bar icon to open the sidebar, and it will automatically push this content to the right. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus velit fuga accusamus quo placeat cumque iusto. Molestias soluta numquam, dolore debitis consequuntur, magni expedita repellendus amet, eaque exercitationem adipisci. Enim. </p> </div> <script> function show() { document.getElementById("mySidebar").style.width = "230px"; document.getElementById("content").style.display = "none"; } function hide() { document.getElementById("mySidebar").style.width = "0"; document.getElementById("content").style.display = "block"; } </script> </body> </html>
- Related Articles
- How to create a collapsible sidebar menu with CSS and JavaScript?
- How to create a collapsible section with CSS and JavaScript?
- How to create a vertical tab menu with CSS and JavaScript?
- How to create a clickable dropdown menu with CSS and JavaScript?
- How to create a curtain navigation menu with CSS and JavaScript?
- How to create a responsive bottom navigation menu with CSS and JavaScript?
- How to create an off-canvas menu with CSS and JavaScript?
- How to create a full screen overlay navigation menu with CSS and JavaScript?
- How to create a Menu Icon with CSS?
- How to create a vertical menu with CSS?
- How to create a "fixed" menu with CSS?
- How to create a subnavigation menu with CSS?
- How to create a dropup menu with CSS?
- How to create a top navigation menu for smartphones / tablets with CSS and JavaScript?
- How to create a horizontal scrollable menu with CSS?
