Bootstrap Snippet Simple SearchBar using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-default navbar-fixed-top" id="gloup" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li ><a href="#" class="search-button" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-search"></span></i></a></li>
            <form class="navbar-form navbar-left">
            <input class="form-control input-search" placeholder="Search" type="text">
            </form>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.input-search{
    z-index:-1;
    position:absolute;
    width:0;
    opacity:0;
}
.input-search:focus, .input-search:active{
    position:absolute;
    opacity:1;
    display:block;
    width:50%;
    top:350px;
    left:25%;
    height:120px;
    z-index:1;
    transition: height ease-in 0.5s;
    font-size:4em;
}
@media (max-width: 960px) {
    .input-search:focus{
        width:70%;
        left:15%;
    }
}
@media (max-width: 768px) {
    .input-search:focus{
        width:100%;
        left:0;
    }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
    
$(document).ready(function () {
    $(".search-button").click(function(e){
        $(".input-search").focus(); 
        return false;
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Simple SearchBar"
Bootstrap 3.2.0 Snippet by karbonn

Related: See More

Questions / Comments:

"Simple SearchBar" Bootstrap 3.2.0 Snippet by karbonn

Related: See More

Questions / Comments:

"Simple SearchBar"
Bootstrap 3.2.0 Snippet by karbonn