Responsive Multi-level dropdown menu with search bar

In this code, I'm going to share with you a responsive multi-level dropdown with search bar, so we need HTML, CSS, and JavaScript.
Source code with preview:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { overflow-x: hidden; height: 100%; } body { background: #fff; padding: 0; margin: 0; font-family: 'Varela Round', sans-serif; } /*start header css*/ .header { display: block; margin: 0 auto; width: 100%; max-width: 100%; box-shadow: 0px 0px 4px 0px; background-color: white; position: fixed; height: 48px!important; overflow: hidden; z-index: 10; } .main { margin: 0 auto; display: block; height: 100%; margin-top: 60px; } .mainInner { display: table; height: 100%; width: 100%; text-align: center; } .mainInner div { display: table-cell; vertical-align: middle; font-size: 3em; font-weight: bold; letter-spacing: 1.25px; } #sideMenu { height: 100%; position: fixed; left: 0; width: 250px; margin-top: 48px; transform: translateX(-250px); transition: transform 250ms ease-in-out; background: #eec902; z-index: 1; } .sideMenuInner { margin: 0; padding: 0; border-top: 1px solid black; } .sideMenuInner li { list-style: none; color: #fff; text-transform: uppercase; font-weight: bold; padding: 20px; cursor: pointer; } .sideMenuInner li:hover {background:#d6b400} .sideMenuInner li span { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.50); } .sideMenuInner li a { color: #000; text-transform: uppercase; font-weight: bold; cursor: pointer; text-decoration: none; } input[type="checkbox"]:checked~#sideMenu { transform: translateX(0); } input[type=checkbox] { transition: all 0.3s; box-sizing: border-box; display: none; } .sideIconToggle { transition: all 0.3s; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 16px; left: 15px; height: 22px; width: 22px; } .spinner { transition: all 0.3s; box-sizing: border-box; position: absolute; height: 3px; width: 100%; background-color: #000; } .horizontal { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 3px; } .diagonal.part-1 { position: relative; transition: all 0.3s; box-sizing: border-box; float: left; } .diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 3px; } input[type=checkbox]:checked~.sideIconToggle>.horizontal { transition: all 0.3s; box-sizing: border-box; opacity: 0; } input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-1 { transition: all 0.3s; box-sizing: border-box; transform: rotate(135deg); margin-top: 8px; } input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; transform: rotate(-135deg); margin-top: -9px; } #sidenav-overlay { position: fixed; top: 0; left: 0; width: 0; height: 100%; background: rgba(0, 0, 0, .1); cursor: pointer; z-index: 1; } #search-input1{;text-align: center; width:100%;position:absolute ;z-index:999; height:48px; width:100%; top:0;background:white;display:block} #search-input{display:none} .fa {font-size: 24px;vertical-align: middle;} i.fa.fa-search{float:right; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 99; top: 10px; right: 15px; height: 22px; width: 22px;color:#484848}@media only screen and (max-width: 387px) {i.fa.fa-search{ right: 2px}} .header img{width: 130px} i.fa.fa-arrow-left { position: absolute; left: 5px; top: 10px; } /*end header css*/ .multlevel:after {content: "\f078";font-family: 'FontAwesome';position: absolute;right: 12px;} .multlevel, .onelevel { background:#eec902 ; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.9s; } .active, .multlevel:hover { background-color: #d6b401; } .active, .onelevel:hover { background-color: #d6b401; }.subitem { padding: 0 ; display: none; background-color: white; overflow: hidden; } button.fa.fa-search {position: absolute;height: 38px;margin-left: 1px;top: 5px;font-size: medium;} </style> <header> <form id="search-input" action="search"> <input type="search" name="q" placeholder="search..." value="" autocomplete="off" style="position: relative; top: 5px; height: 38px; width: 80%;"><i class="fa fa-arrow-left" onclick="document.getElementById('search-input1').id='search-input'" style="float:left"></i><button class="fa fa-search" style="float:right"></button> </form> <div class="header"> <i class="fa fa-search" onclick="document.getElementById('search-input').id='search-input1'"></i> <a href="#" style="position: absolute; top: 3px; right: 43px; text-decoration: none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8cF9wza5D9zmmLoGW-nVFvU7sUTKqe_I91wqatpJGvF5aKaMusehRrxvRgVQXp4uui-F-RpfXin6bwMy2YtCw5yAoN-nGJaVKZlBMu0jWyX9t4vEf5RIOie4Sg0YQ35GAlc7itO7H8H-2/h111/manajmnt+logo.png" alt="Manajmnt" title="Manajmnt"/> </a> </div> <div id="sidebarContainer"> <input type="checkbox" class="openSideMenu" id="openSideMenu"> <label for="openSideMenu" class="sideIconToggle"> <div class="spinner diagonal part-1"></div> <div class="spinner horizontal"></div> <div class="spinner diagonal part-2"></div> </label> <div id="sideMenu"> <ul class="sideMenuInner"> <!--onelevel--> <button class="onelevel"><a onclick="hideSidebar()" href="#" data-toggle="tab">onelevel</a></button> <!--onelevel--> <!--twolevel--> <button class="multlevel">twolevel</button> <div class="subitem"> <button class="onelevel"><a href="#">section</a></button> </div> <!--twolevel--> <!--threelevel--> <button class="multlevel">threelevel</button> <div class="subitem"> <button class="multlevel">threelevel</button> <div class="subitem"> <button class="onelevel"><a href="#">Section 1.2.1</a></button> <button class="onelevel"><a href="#">Section 1.2.1</a></button> <button class="onelevel"><a href="#">Section 1.2.1</a></button> </div> <button class="onelevel"><a href="#">section</a></button> </div> <!--threelevel--> </ul> </div> </div> <script> function hideSidebar() { document.getElementById('openSideMenu').checked = false; } var sideIconToggle = document.getElementById('sidebarContainer'); document.addEventListener('click', function(event) { if (!sidebarContainer.contains(event.target)) hideSidebar(); }); </script> <script> var acc = document.getElementsByClassName("multlevel"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var subitem = this.nextElementSibling; if (subitem.style.display === "block") { subitem.style.display = "none"; } else { subitem.style.display = "block"; } }); } </script> </header>

© Manajmnt code

Share to :

☷✎