Bootstrap Snippet Navbar_Icons using HTML CSS Bootstrap jQuery

"Navbar_Icons"
Bootstrap 3.3.0 Snippet by rpenfold

3.3.0 jQuery navbar icons

3.8K 0 Fav

Post to Facebook Tweet this

<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>   <nav class="navbar navbar-default navbar-static collapsed" id="navbar">  <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>  <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>  <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> <li><a href="#">Available glyphs</a></li> <li class="disabled"><a href="#">How to use</a></li> <li><a href="#">Examples</a></li> <li class="divider"></li> <li class="dropdown-header">Dropdowns</li> <li><a href="#">Example</a></li> <li><a href="#">Aligninment options</a></li> <li><a href="#">Headers</a></li> <li><a href="#">Disabled menu items</a></li> </ul> </li> <li class="col-md-3 hidden-xs"> <ul class="multi-column-dropdown"> <li class="dropdown-header">Button groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Button toolbar</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">Nesting</a></li> <li><a href="#">Vertical variation</a></li> <li class="divider"></li> <li class="dropdown-header">Button dropdowns</li> <li><a href="#">Single button dropdowns</a></li> </ul> </li> <li class="col-md-3 hidden-xs"> <ul class="multi-column-dropdown"> <li class="dropdown-header">Input groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">Checkboxes and radio addons</a></li> <li class="divider"></li> <li class="dropdown-header">Navs</li> <li><a href="#">Tabs</a></li> <li><a href="#">Pills</a></li> <li><a href="#">Justified</a></li> </ul> </li> <li class="col-md-3 hidden-xs"> <ul class="multi-column-dropdown"> <li class="dropdown-header">Navbar</li> <li><a href="#">Default navbar</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Text</a></li> <li><a href="#">Non-nav links</a></li> <li><a href="#">Component alignment</a></li> <li><a href="#">Fixed to top</a></li> <li><a href="#">Fixed to bottom</a></li> </ul> <a href="#" style="float: right; padding-right: 25px">See All</a> </li> </ul> </div>  <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-ok-sign"></span> <p class="collapsed" id="techtickets">TechTickets</p> </button> </div>  <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-stats"></span> <p class="collapsed" id="reports">Reports</p> </button> </div>  <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-bell"></span> <p class="collapsed" id="news">News</p> </button> </div>  <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-calendar"></span> <p class="collapsed" id="calendar">Calendar</p> </button> </div>  <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-user"></span> <p class="collapsed" id="profile">Profile</p> </button> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12 hidden-xs"> <toggle href="#" class="glyphicon glyphicon-chevron-down toggle" id="toggle" style="top: -40px"></toggle> </div> </div> </nav> <div class="container" style="border: 2px dashed red"> <h2><u>To-do List:</u></h2> <input type="checkbox">Create cleaner drop-down for Wiki<br> <input type="checkbox">Create halo effect for buttons on hover<br> <input type="checkbox">Create animation for button click<br> <input type="checkbox">Add expandable search to navbar<br> <input type="checkbox">Create drop-down menu for profile (everyone, my profile, edit profile)<br> <input type="checkbox">Create tooltips for menu when collapsed<br> <input type="checkbox">Create drop-down menu for TechTickets (my tickets, all tickets)<br> <input type="checkbox">Make Navbar themeable (light / dark)<br> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </div>

/*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; font-size: 14px; transition: opacity 1s, font-size .5s } /*TOGGLE TO COLLAPSE/EXPAND THE NAVBAR*/ toggle { color: grey; float: right; padding-right: 25px; transition: transform 1s; cursor: pointer; } .toggle.collapsed { transform: rotateX(0deg); } .toggle.expanded { transform: rotateX(180deg); } /*DROPDOWN MENU*/ .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: 600px) { .btn-nav .glyphicon { padding-top: 12px; font-size: 26px; } } @media (max-width: 767px) { .dropdown-menu.multi-column { min-width: 240px !important; overflow-x: hidden; } }

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

Related: See More

Paper Kit

Questions / Comments:

Posting GuidelinesFormatting