Bootstrap snippet: Ui Kit Metro Like Nav

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.



<!-- http://watchopolis.net --> <div class="container bootstrap snippet"> <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> <br> <div class="row"> <a target="_blank" href="http://watchopolis.net" class="btn btn-danger btn-outline btn-lg">Visit us !</a> </div> </div>
/* http://watchopolis.net */ *, *: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; } .btn-success.btn-outline { color: #5cb85c; } .btn-outline { background-color: transparent; color: inherit; transition: all .5s; } @-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; }
// http://watchopolis.net 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 ); }); });
Watchopolis

Ui Kit Metro Like Nav

Watchopolis
  Jul 20th 2014, 10:00
789 Views