How to create responsive Collapse Sidebar with search bar

In this code I will be share with you how to create responsive Collapse Sidebar with search bar using html, css, javascript
 <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; } button.fa.fa-search {position: absolute;height: 38px;margin-left: 1px;top: 5px;font-size: medium;}
  
  
  /*end header css*/
</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">
      <li class="active" onclick="hideSidebar()"><a href="#" data-toggle="tab">Item1</a></li>
      <li onclick="hideSidebar()"><a href="#" data-toggle="tab">Item2</a></li>
      <li onclick="hideSidebar()"><a href="#" data-toggle="tab">Item3</a></li>
    </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>
</header>
☷✎
How to create responsive Collapse Sidebar with search bar

Comments

Post a Comment

Meta keywords generator tool for Blogger

Custom permalink creator for blogger

Create direct download link for google drive file online

blogger meta description generator

How to keep input value if user change current page in blogger

How to create responsive Collapse Sidebar with search bar

Related

Comments

Post a Comment
