Bootstrap Snippet Svbtle Inspired Menu using HTML CSS Bootstrap 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="//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 ---------->
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen">
<link href="http://www.wiseberry.com.au/css/wiseberry-icons.css" rel="stylesheet" media="screen">
<div class="container">
    <div class="row">
        <div class="[ col-xs-12 ] search-params">
            <h4>Search</h4>
            <p> <span class="param">For Sale</span> | <span class="param">House</span> | <span class="param">Baulkham Hills, Castle Hill Kellyville</span> | <span class="param"><strong>4</strong> <span class="wb wb-beds"></span></span> | <span class="param"><strong>2</strong> <span class="wb wb-baths"></span></span> | <span class="param"><strong>2</strong> <span class="wb wb-cars"></span></span> | <span class="param">$Min 500K</span> | <span class="param">$Max $900K</span> <span class="fa fa-search-plus nav-controller psuedo-link pull-right">Refine</span></p>
        </div>        
    </div>
    <div class="row">
        <div class="[ col-xs-12 col-sm-6 col-md-4 ]">
            <h2>MENU</h2>
            <span class="console"></span>
            <p>So When I came across this site called <a href="https://svbtle.com">Svbtle</a> today (June 25th, 2014) and before even reading the article that brought me to the site I feel in love with the design. It was so simple it was beautiful. I wanted to recreate the menu so here is my attempt.</p>
        </div>        
    </div>
</div>
<nav class="animate">
    <h4>Property Search</h4>
    <form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="suburbs">Suburbs to search</label>
            <input type="email" class="form-control" id="Suburbs" placeholder="Enter suburbs">
        </div>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">@</div>
                <input class="form-control" type="email" placeholder="Enter email">
            </div>
        </div>
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
body {
    font-family: sans-serif;
}
h2 {
    text-transform: uppercase;
}
.wb {
    display: inline-block;
    font-family: "wiseberry-icons" !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.animate {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.param {
    color: rgba(51,51,51.0.8);
}
.search-params {
    background:#f2f2f5;
    border-bottom: 1px solid #fff;
}
.psuedo-link {
    color: #428bca;
    font-size: 1.4em;
    text-decoration: underline;
    cursor: pointer;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
$(function() {
    $('.nav-controller').on('click', function(event) {
        $('nav').toggleClass('focus');
    });
    
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Svbtle Inspired Menu"
Bootstrap 3.2.0 Snippet by Synergi

Related: See More

Questions / Comments:

"Svbtle Inspired Menu" Bootstrap 3.2.0 Snippet by Synergi

Related: See More

Questions / Comments:

"Svbtle Inspired Menu"
Bootstrap 3.2.0 Snippet by Synergi