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

<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 ----------> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-nav"> <a class="list-group-item" href="winners.html"><i class="fa fa-trophy fa-fw" aria-hidden="true"></i> First Prize Bands Leaderboard</a> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <a class="list-group-item" href="index.html?p=firstBands"><i class="fa fa-trophy fa-fw" aria-hidden="true"></i> First Prize Bands</a> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <a class="list-group-item" href="index.html?p=firstCaptains"><i class="fa fa-trophy fa-fw" aria-hidden="true"></i>First Prize Captains</a> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <a class="list-group-item" href="index.html?p=secondBands"><i class="fa fa-hand-peace-o fa-fw" aria-hidden="true"></i> Second Prize Bands</a> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <a class="list-group-item" href="index.html?p=lastBands"><i class="fa fa-thumbs-o-down fa-fw" aria-hidden="true"></i> Last Prize Bands</a> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <a class="list-group-item" href="index.html?p=leadoffBands"><i class="fa fa-flag fa-fw" aria-hidden="true"></i> Leadoff Bands</a> </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 { 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: