<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"> <li class="dropdown-header">Header</li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li class="divider"></li> <li class="dropdown-header">Header</li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> </ul> </li> <li class="col-md-3 hidden-xs"> <ul class="multi-column-dropdown"> <li class="dropdown-header">Header</li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></a></li> <li class="divider"></li> <li class="dropdown-header">Header</li> <li><a href="#">placeholder</a></li> </ul> </li> <li class="col-md-3 hidden-xs"> <ul class="multi-column-dropdown"> <li class="dropdown-header">Header</li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li class="divider"></li> <li class="dropdown-header">Header</li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> </ul> </li> <li class="col-md-3 hidden-xs"> <ul class="multi-column-dropdown"> <li class="dropdown-header">Header</li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> <li><a href="#">placeholder</a></li> </ul> <a href="#" style="float:right;padding-right:25px">See All</a> </li> </ul> </div> <!--TechTicket--> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-ok-sign"></span> <p id="techtickets">TechTicket</p> </button> </div> <!--Reports--> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-stats"></span> <p id="reports">Reports</p> </button> </div> <!--News--> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-bell"></span> <p id="news">News</p> </button> </div> <!--Calendar--> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-calendar"></span> <p id="calendar">Calendar</p> </button> </div> <!--Profile--> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-user"></span> <p id="profile">Profile</p> </button> </div> </div> </div> </div> </div> </nav>

/*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; -webkit-box-sizing:border-box; -webkit-transition: border 0.3s ease-out, color 0.3s ease 0.5s; -moz-transition: border 0.3s ease-out, color 0.3s ease 0.5s; -ms-transition: border 0.3s ease-out, color 0.3s ease 0.5s; /* IE10 is actually unprefixed */ -o-transition: border 0.3s ease-out, color 0.3s ease 0.5s; transition: border 0.3s ease-out, color 0.3s ease 0.5s; } .btn-nav.active:before { content: ''; position: absolute; border-style: solid; border-width: 6px 6px 0; border-color: #692361 transparent; display: block; width: 0; z-index: 1; margin-left: -6px; top: 0; left: 50%; } .btn-nav .glyphicon { padding-top: 16px; font-size: 22px; } .btn-nav.active p { margin-bottom: 4px; } @media (max-width: 480px) { .btn-group { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; } } @media (max-width: 600px) { .btn-nav .glyphicon { padding-top: 12px; font-size: 26px; } } .dropdown-menu { min-width: 767px; } .dropdown-menu li a { padding: 5px 15px; font-weight: 300; } .multi-column-dropdown { list-style: none; } .multi-column-dropdown li a { display: block; clear: both; line-height: 1.428571429; color: #333; white-space: normal; } .multi-column-dropdown li a:hover { text-decoration: none; color: #262626; background-color: #f5f5f5; } @media (max-width: 767px) { .dropdown-menu.multi-column { min-width: 240px !important; overflow-x: hidden; } }

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 ); }); });