Bootstrap Snippet NavBar 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.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<!--NAVBAR-->
<nav class="navbar navbar-default navbar-static">
    <!--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="container">
            <div class="row">
                <div class="btn-group btn-group-justified">
                    <!--Home-->
                    <div class="btn-group">
                        <button type="button" class="btn btn-nav">
                            <span class="glyphicon glyphicon-home"></span>
                            <p 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 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">
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
/*MODERN NAVBAR*/
*, *:before, *:after {
  /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
  -webkit-box-sizing: border-box; 
  /* Firefox (desktop or Android) 28- */
  -moz-box-sizing: border-box;
  /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
  box-sizing: border-box;
}
body {
    text-align: center;
    padding-top: 0px;
}
.btn-nav {
    background-color: #fff;
    border: 1px solid #e0e1db;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.btn-nav:hover {
    color: #692361;
    cursor: pointer;
    -webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
    transition: color 1s;
}
.btn-nav.active {
    color: #692361;
    padding: 2px;
    border-top: 6px solid #692361;
    border-bottom: 6px solid #692361;
    border-left: 0;
    border-right: 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
var activeElement = 0;//select default tab
$(function() {
    var items = $('.btn-nav');
    $( items[activeElement] ).addClass('active');
    $( ".btn-nav" ).click(function() {
        $( items[activeElement] ).removeClass('active');
        $( this ).addClass('active');
        activeElement = $( ".btn-nav" ).index( this );
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"NavBar"
Bootstrap 3.1.0 Snippet by rpenfold

Related: See More

Questions / Comments:

"NavBar" Bootstrap 3.1.0 Snippet by rpenfold

Related: See More

Questions / Comments:

"NavBar"
Bootstrap 3.1.0 Snippet by rpenfold