Create A Dropdown Sidebar
Step 1: Create index.html and implement below code
<div class="sidenav"> <a href="#about">About</a> <a href="#services">Services</a> <a href="#clients">Clients</a> <a href="#contact">Contact</a> <button class="dropdown-btn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-container"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> <a href="#contact">Search</a> </div> <div class="main"> <div class="text-center"> <h1>How To Create Dropdown Sidebar Using CSS And JavaScript</h1> </div> <h2>Sidebar Dropdown</h2> <p>Click on the dropdown button to open the dropdown menu inside the side navigation.</p> <p>This sidebar is of full height (100%) and always shown.</p> <p>Some random text..</p> </div>
<style> body { font-family: "Lato", sans-serif; } /* Fixed sidenav, full height */ .sidenav { height: 100%; width: 200px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top: 20px; } /* Style the sidenav links and the dropdown button */ .sidenav a, .dropdown-btn { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 20px; color: #818181; display: block; border: none; background: none; width: 100%; text-align: left; cursor: pointer; outline: none; } /* On mouse-over */ .sidenav a:hover, .dropdown-btn:hover { color: #f1f1f1; } /* Main content */ .main { margin-left: 200px; /* Same as the width of the sidenav */ font-size: 20px; /* Increased text to enable scrolling */ padding: 0px 10px; } /* Add an active class to the active dropdown button */ .active { background-color: tomato; color: white; } /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */ .dropdown-container { display: none; background-color: #262626; padding-left: 8px; } /* Optional: Style the caret down icon */ .fa-caret-down { float: right; padding-right: 8px; } /* Some media queries for responsiveness */ @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } h1{ color: tomato; } </style>
<script> /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */ var dropdown = document.getElementsByClassName("dropdown-btn"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.classList.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } </script>
<!DOCTYPE html> <html> <head> <title>How To Create Dropdown Sidebar Using CSS And JavaScript</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <style> body { font-family: "Lato", sans-serif; } /* Fixed sidenav, full height */ .sidenav { height: 100%; width: 200px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top: 20px; } /* Style the sidenav links and the dropdown button */ .sidenav a, .dropdown-btn { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 20px; color: #818181; display: block; border: none; background: none; width: 100%; text-align: left; cursor: pointer; outline: none; } /* On mouse-over */ .sidenav a:hover, .dropdown-btn:hover { color: #f1f1f1; } /* Main content */ .main { margin-left: 200px; /* Same as the width of the sidenav */ font-size: 20px; /* Increased text to enable scrolling */ padding: 0px 10px; } /* Add an active class to the active dropdown button */ .active { background-color: tomato; color: white; } /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */ .dropdown-container { display: none; background-color: #262626; padding-left: 8px; } /* Optional: Style the caret down icon */ .fa-caret-down { float: right; padding-right: 8px; } /* Some media queries for responsiveness */ @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } } h1 { color: tomato; } </style> <body> <div class="container"> <br> <br> <br> <div class="well"> <div class="sidenav"> <a href="#about">About</a> <a href="#services">Services</a> <a href="#clients">Clients</a> <a href="#contact">Contact</a> <button class="dropdown-btn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-container"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> <a href="#contact">Search</a> </div> <div class="main"> <div class="text-center"> <h1>How To Create Dropdown Sidebar Using CSS And JavaScript</h1> </div> <h2>Sidebar Dropdown</h2> <p>Click on the dropdown button to open the dropdown menu inside the side navigation.</p> <p>This sidebar is of full height (100%) and always shown.</p> <p>Some random text..</p> </div> <script> var dropdown = document.getElementsByClassName("dropdown-btn"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function () { this.classList.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } </script> </div> <div> </body> </html>