"Ui-Kit-Metro Like Nav"
Bootstrap 3.1.0 Snippet by DonSinDRom

<div class="container"> <div class="row"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-folder-close"></span> <p>Shopping</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-calendar"></span> <p>Calendar</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-globe"></span> <p>Network</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-leaf"></span> <p>Ecology</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-time"></span> <p>Statistics</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-bell"></span> <p>Events</p> </button> </div> </div> </div> </div>
/* Inspired by http://dribbble.com/shots/890759-Ui-Kit-Metro/attachments/97174 */ *, *: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 { background: url(http://habrastorage.org/files/90a/010/3e8/90a0103e8ec749c4843ffdd8697b10e2.jpg); text-align: center; padding-top: 40px; } .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: #e92d00; cursor: pointer; -webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */ transition: color 1s; } .btn-nav.active { color: #e92d00; padding: 2px; border-top: 6px solid #e92d00; border-bottom: 6px solid #e92d00; 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; -webkit-animation: pulsate 1.2s linear infinite; animation: pulsate 1.2s linear infinite; } .btn-nav.active:before { content: ''; position: absolute; border-style: solid; border-width: 6px 6px 0; border-color: #e92d00 transparent; display: block; width: 0; z-index: 1; margin-left: -6px; top: 0; left: 50%; } .btn-nav .glyphicon { padding-top: 16px; font-size: 40px; } .btn-nav.active p { margin-bottom: 8px; } @-webkit-keyframes pulsate { 50% { color: #000; } } @keyframes pulsate { 50% { color: #000; } } @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; } }
var activeEl = 2; $(function() { var items = $('.btn-nav'); $( items[activeEl] ).addClass('active'); $( ".btn-nav" ).click(function() { $( items[activeEl] ).removeClass('active'); $( this ).addClass('active'); activeEl = $( ".btn-nav" ).index( this ); }); });

Similar snippets: See More


Comments:

pipe 2014-05-14 11:46:04
    I like this navigation. do anybody know an solution to change this as a responsive navigation? it would bee nice if there is a chance, that the menu will be a button if the screen is smaler than xy pixel.
duvalsoft 2014-05-26 18:04:35
    look at ace admin theme in google . There is a nice solution.
Author 2014-06-03 16:15:02
    Yep, it is not responsive - I will fix it later. (:
BBB Pam Northman 2014-05-31 00:58:06
    Nice! Thanks much.
Roch Fredzio 2014-06-02 06:45:42
    When last element has 'active' class set then those element move upa and hasn't got top and bottom bars. See at: http://bootsnipp.com/user/s.... How to fix it?
Author 2014-06-03 16:14:07
    .nav-row .col-md-2:last-child { border: 1px solid #E0E1DB } - just delete this row.
Roch Fredzio 2014-06-04 12:35:56
    Thanks a lot. It works.
ATomIC 2014-06-17 00:11:35
    Please make this responsive!!!!
Author 2014-07-07 14:09:42
    Done.
Vini 2014-06-17 03:46:56
    Seems like it get buggy when you put an tag. Is there any way to fix it? Thank you very much!
Vini 2014-06-17 03:47:37
    Seems like it get buggy when you put an < a href > tag. Is there any way to fix it? Thank you very much!!
uttam 2014-11-18 07:49:36
    i face the same problem. what the use if links are not work correctly. nice work but useless until you not fix this problem.
azu 2014-08-07 13:37:58
    I'm trying to get three buttons displayed across (instead of getting them all squashed up) when shrinking screen under 900px using media queries but cannot seem to figure it out. I'm using:
Bang 2014-10-16 09:23:52
    Pretty cool
yoyo 2014-12-08 20:39:04
    cool!
Jayesh Patel 2015-06-11 12:30:19
    nice
yogesh pandey 2015-06-29 18:10:55
    how to reduce its height along with small icon size.. as it looks very broad on the web page

Commenting will be back soon.