"NewFWP"
Bootstrap 3.3.0 Snippet by ankurd3

Post to Facebook Tweet this

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 ---------->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle navbar-toggle-sidebar collapsed">
MENU
</button>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">
FWP Groceries
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" method="GET" role="search">
<div class="form-group">
<input type="text" name="q" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://www.pingpong-labs.com" target="_blank">Visit Site</a></li>
<li class="dropdown ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Account
<span class="caret"></span></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
/* FOR DEMO ONLY */
/* Import Bootswatch paper theme because it isn't provided by Bootsnipp and it is awesome! */
@import url(//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.4/paper/bootstrap.min.css);
@import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css);
/* WHAT YOU NEED */
.fading-side-menu.affix-top {
opacity: 1;
transition: opacity 1s
}
.fading-side-menu.affix {
top: 11.5px;
}
.fading-side-menu.affix {
opacity: 0.2;
transition: opacity 5s
}
.fading-side-menu.affix:hover {
opacity: 1;
transition: opacity 0.3s
}
/* RECOMMENDED STYLING BUT NOT REQUIRED */
.fading-side-menu a {
color: rgb(102, 102, 102);
}
.fading-side-menu a .fa {
padding-right:15px;
}
/* FOR DEMO ONLY */
body {
background-color: rgb(255, 255, 255);
font-size: 16px;
}
header {
background: url('https://unsplash.imgix.net/photo-1427955569621-3e494de2b1d2?fit=crop&fm=jpg&h=700&q=75&w=1050') no-repeat center bottom;
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
/* THOUGH THIS PLUGIN DOES NOT CONTAIN
ANY JAVASCRIPT ITSELF, IT DOES REQUIRE
THE BOOTSTRAP AFFIX PLUGIN. */
/* START OF DEMO JS - NOT NEEDED */
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
});
$(function () {
$('#slider-container').slider({
range: true,
min: 299,
max: 1099,
values: [299, 1099],
create: function() {
$("#amount").val("$299 - $1099");
},
slide: function (event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
var mi = ui.values[0];
var mx = ui.values[1];
filterSystem(mi, mx);
}
})
});
function filterSystem(minPrice, maxPrice) {
$("#computers div.system").hide().filter(function () {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit

Questions / Comments: