I was just thinking that today Lot of Website Contains search bar with expandable effects so I decided to have that tutorial on that effects . So today we will learn how to create an Expandable search bar effects with simple HTML and CSS .The main Advantage of this is that it requires less space on the website and it can expand over other Elements also.
DEMO HERE
creating the page
Index.html
<body>
<div class="container"> <!-- Top Navigation -->
<header>
<h1>Expanding Search Bar <span>A click-to-expand search input</span></h1>
<hr color="white">
</header>
<p>The search bar can be opened on click And its gets Expanded</p>
</div>
<div >
<div id="sb-search" class="sb-search"> <form>
<input class="sb-search-input" placeholder="Search Here.." type="text" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"></span>
</form>
</div>
</div>
</div>
</div><!-- /container --> <script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script>
new UISearch( document.getElementById( 'sb-search' ) );
</script>
<hr color= "white">
<div class="footer">
<center><h4 >LetscreateLab creation-by venkatesh pillai</h4></center>
</div>
</body>
DEMO HERE
creating the page
Index.html
<body>
<div class="container"> <!-- Top Navigation -->
<header>
<h1>Expanding Search Bar <span>A click-to-expand search input</span></h1>
<hr color="white">
</header>
<p>The search bar can be opened on click And its gets Expanded</p>
</div>
<div >
<div id="sb-search" class="sb-search"> <form>
<input class="sb-search-input" placeholder="Search Here.." type="text" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"></span>
</form>
</div>
</div>
</div>
</div><!-- /container --> <script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script>
new UISearch( document.getElementById( 'sb-search' ) );
</script>
<hr color= "white">
<div class="footer">
<center><h4 >LetscreateLab creation-by venkatesh pillai</h4></center>
</div>
</body>
Styling The Page
component.css
.sb-search {
opacity:0.8;
position: relative;
margin-top: 10px;
width: 0%;
min-width: 60px;
height: 60px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0;
border: 2px #FFFFFF;
outline: none;
background: #fff;
width: 84%;
height: 60px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #FC6907;
}
.sb-search-input::-webkit-input-placeholder {
color: #0066FF;
}
.sb-search-input:-moz-placeholder {
color: #0066FF;
}
.sb-search-input::-moz-placeholder {
color: #0066FF;
}
.sb-search-input:-ms-input-placeholder {
color: #0066FF;
}
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff;
filter: alpha(opacity=0);
opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: #fff;
background: #FCB84B;
z-index: 90;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "\e000";
}
styling Searchbar open state
/* Open state */
.sb-search.sb-search-open,
.no-js .sb-search {
width: 100%;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #da6d0d;
color: #fff;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
z-index: 90;
}
No comments:
Post a Comment