Bootstrap Snippet Search Suggestion 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
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<header class="site-header">
        <!-- Brand and toggle get grouped for better mobile display -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainMenu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a id="logo" class="navbar-brand" href="#link" title="">
            Your Company
        </a>
        <nav class="site-nav" role="navigation">
            <div class="collapse navbar-collapse" id="MainMenu">
                <ul class="nav navbar-nav pull-right">
                    <li class="dropdown menu-background">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
                            Category <i class="fa fa-angle-down" aria-hidden="true"></i>
                            </a>
                        <ul class="dropdown-menu mega-dropdown-menu">
                            <li> <a href="#link">Category 1</a> </li>
                            <li> <a href="#link">Category 2</a> </li>
                            <li> <a href="#lins">Category 3</a> </li>
                            <li> <a href="#link">Category 4</a> </li>
                            <li class="divider hidden-xs"></li>
                            <li> <a href="#link"><i class="fa fa-list-ul"></i> View All</a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
                            User <i class="fa fa-angle-down" aria-hidden="true"></i>
                        </a>
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
34
35
36
37
.site-header {
    height:450px; /* Remove affer */
    width:800px;/* Remove affer */
    margin: 50px auto;
}
#MainMenu {
    padding:0;
}
.navbar-brand {
    padding-left:0;
    padding-right:0;
}
/*---------- Search ----------*/
.result-bucket li {
    padding: 7px 15px;
}
.instant-results {
    background: #fff;
    width: 100%;
    color: gray;
    position: absolute;
    top: 100%;
    left: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .175);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .175);
    display: none;
    z-index: 9;
}
.form-search {
    transition: all 200ms ease-out;
    -webkit-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
}
.search-form {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function () {
    //Hover Menu in Header
    $('ul.nav li.dropdown').hover(function () {
        $(this).find('.mega-dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function () {
        $(this).find('.mega-dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });
    
    //Open Search    
    $('.form-search').click(function (event) {
        $(".instant-results").fadeIn('slow').css('height', 'auto');
        event.stopPropagation();
    });
    $('body').click(function () {
        $(".instant-results").fadeOut('500');
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Search Suggestion"
Bootstrap 3.3.0 Snippet by ilmf2606

Related: See More

Questions / Comments:

"Search Suggestion" Bootstrap 3.3.0 Snippet by ilmf2606

Related: See More

Questions / Comments:

"Search Suggestion"
Bootstrap 3.3.0 Snippet by ilmf2606