serach bar sidebar fixed plus button HTML CSS JAVASCRIPT

serach bar sidebar fixed plus button HTML CSS JAVASCRIPT

by Arvind Pal

HTML

<div class="info">
+
</div>
<div class="header">
  
<div   class="ham" onclick="chbg('red')">
  <div class="line">
    
  </div>
  <div id="b" class="line">
    
  </div>
  <div class="line">
    
  </div>
</div>
  <input type="text" placeholder="Search....">
</div>
<div id="sidebar" class="sidebar">

<div id="close" class="close"  onclick="close1('red')">x</div>

</div>

CSS

.info{ 
  width:18px;
  background-color:#f72946;
  color:#fff;
  border-radius:100px;
  text-align:center; 
  padding:10px;
  right:24px;
  bottom:24px;
  position:absolute;
} 

.header{
  width:100%;
  height:60px;
  z-index:1;
  background-color:#aaa;
}

input[type='text']{
  color:blue;
  outline:none;
  padding:6px;
  right:15px;
  float:right;
  width:120px;
  margin-top:10px;
  border-radius:10px;
  transition: width 1s; 
  right:20px;
}

input[type='text']:focus{
  width:250px;
}
.line{
  background-color:#000;
  width:18px;
  height:2px;
  margin-left:3px;
  margin-top:5px;
}
.ham{
  margin-top:15px;
  margin-left:5px;
  height:24px;
  width:24px;
  float:left;
  background-color:#fff;
}
.sidebar{
  position:absolute;
  width:0px;
  height:99%;
  z-index:10000;
  background-color:#ccc;
  top:13px;
  display:block;
  transition: width .5s; 
}

.close{
  position:relative;
  float:right;
  width:0px;
  height:0px;
  padding-bottom:7px;
  padding-left:4px;
  padding-right:4px;
  color:#fff;
  background-color:#aaa;
  text-align:center;
  border-radius:10px;
  left:-5px;
  font-size:14px; 
  top:5px;
}

JavaScript

function close1() { 
    document.getElementById('sidebar').style.width ='0px';
    document.getElementById('close').style.width ='0px';
    document.getElementById('close').style.height ='0px';
}

function chbg(color) {
  //  document.getElementById('b').style.backgroundColor = color;
    document.getElementById('sidebar').style.width ='180px';
    document.getElementById('close').style.width ='10px';
    document.getElementById('close').style.height ='10px';
}