Thursday, 17 October 2013

Expandable Search bar with Css

Share it Please
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.


creating the page

<div class="container">
<!-- Top Navigation -->
<h1>Expanding Search Bar <span>A click-to-expand search input</span></h1>
<hr color="white">
<p>The search bar can be opened on click And its gets Expanded</p>
<div >
<div id="sb-search" class="sb-search">
<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>

</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>

new UISearch( document.getElementById( 'sb-search' ) );
<hr color= "white">
<div class="footer">
<center><h4 >LetscreateLab creation-by venkatesh pillai</h4></center>


Styling The Page 

.sb-search {
    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;

    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 */,
.no-js .sb-search {
    width: 100%;
} .sb-icon-search,
.no-js .sb-search .sb-icon-search {
    background: #da6d0d;
    color: #fff;
    z-index: 11;
} .sb-search-submit,
.no-js .sb-search .sb-search-submit {
    z-index: 90;


No comments:

Post a Comment