"Navbar_Icons"
Bootstrap 3.3.0 Snippet by rpenfold

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 ---------->
<!--MODERN NAVBAR-->
<nav class="navbar navbar-default navbar-static collapsed" id="navbar">
<!--Mobile Menu-->
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Desktop/Tablet Menu-->
<div class="collapse navbar-collapse js-navbar-collapse">
<div class="row">
<div class="container">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-nav" id="btnHome">
<span class="glyphicon glyphicon-home"></span>
<p class="collapsed" id="home">Home</p>
</button>
</div>
<!--Wiki-->
<div class="btn-group">
<button type="button" class="btn btn-nav" data-toggle="dropdown">
<span class="glyphicon glyphicon-book"></span>
<p class="collapsed" id="wiki">Wiki<span class="caret"></span></p>
</button>
<ul class="dropdown-menu multi-column columns-4">
<li class="col-md-3 hidden-xs">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Glyphicons</li>
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
/*NAVBAR*/
.navbar{
width: 100%;
-webkit-transition: height 1s;
transition: height 1s;
box-shadow: 0 2.5px 15px #b4b4b4;
}
.navbar.expanded{
height: 70px;
transition: height 1s;
}
.navbar.collapsed{
height: 50px;
transition: height 1s;
}
/*NAVIGATION BUTTONS*/
.btn-nav {
background-color: transparent;
}
.btn-nav:hover {
color: #692361;
cursor: pointer;
-webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
transition: color 1s;
}
.btn-nav .glyphicon {
padding-top: 8px;
font-size: 18px;
}
/*SHOW/HIDE ANIMATION FOR TEXT WHILE TOGGLING THE NAVBAR*/
p.collapsed {
opacity: 0;
font-size: 0px;
transition: opacity 1s, font-size .5s;
}
p.expanded{
opacity: 1;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//ENSURE THAT EVERYTHING IS FILLED OUT BEFORE BEING ABLE TO SUBMIT***********************
$(document).ready(function(){
$('#toggle').click(function () {
$('#navbar').toggleClass('collapsed expanded');
$('#home').toggleClass('collapsed expanded');
$('#wiki').toggleClass('collapsed expanded');
$('#techtickets').toggleClass('collapsed expanded');
$('#reports').toggleClass('collapsed expanded');
$('#news').toggleClass('collapsed expanded');
$('#calendar').toggleClass('collapsed expanded');
$('#profile').toggleClass('collapsed expanded');
$('toggle').toggleClass('collapsed expanded')
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard PRO

Questions / Comments: