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

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

Related: See More


Questions / Comments:

how to reduce its height along with small icon size.. as it looks very broad on the web page

yogesh pandey (0) - 2 years ago - Reply 0


nice

Jayesh Patel (0) - 2 years ago - Reply 0


cool!

yoyo (0) - 3 years ago - Reply 0


Pretty cool

Bang (0) - 3 years ago - Reply 0


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:

@media (max-width: 900px) {
.btn-group {
width: 33%;
}
}

Any idea how this is done please?

azu (0) - 3 years ago - Reply 0


Seems like it get buggy when you put an < a href > tag. Is there any way to fix it? Thank you very much!!

Vini (0) - 3 years ago - Reply 0


i face the same problem. what the use if links are not work correctly. nice work but useless until you not fix this problem.

uttam (0) - 3 years ago - Reply 0


Seems like it get buggy when you put an tag. Is there any way to fix it? Thank you very much!

Vini (0) - 3 years ago - Reply 0


Please make this responsive!!!!

ATomIC (0) - 3 years ago - Reply 0


Done.

Author (0) - 3 years ago - Reply 0


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?

Roch Fredzio (0) - 3 years ago - Reply 0


.nav-row .col-md-2:last-child { border: 1px solid #E0E1DB } - just delete this row.

Author (0) - 3 years ago - Reply 0


Thanks a lot. It works.

Roch Fredzio (0) - 3 years ago - Reply 0


Nice! Thanks much.

BBB Pam Northman (0) - 3 years ago - Reply 0


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.

pipe (0) - 3 years ago - Reply 0


look at ace admin theme in google . There is a nice solution.

duvalsoft (0) - 3 years ago - Reply 0


Yep, it is not responsive - I will fix it later. (:

Author (0) - 3 years ago - Reply 0