"Admin Nav-Bar"
Bootstrap 3.3.0 Snippet by ashutosh049

<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> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="btn-group btn-group-justified"> <div class="btn-group" onclick="#"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-user"></span> <h4>Profile</h4> </button> </div> <div class="btn-group" onclick="#"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-time"></span> <h4>Statistics</h4> </button> </div> <div class="btn-group" onclick="#"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-usd"></span> <h4>Donate</h4> </button> </div> <div class="btn-group" onclick="#"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-cog"></span> <h4>Settings</h4> </button> </div> <div class="btn-group" onclick="#"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-question-sign"></span> <h4>Help</h4> </button> </div> </div> </div> </div> <div class="main" id="#profile"> <p>profile</p> <div class="jumbotron jumbotron-sm"> <div class="container"> <div class="row"> <div class="col-sm-12 col-lg-12"> <h1 class="h1"> Profile Info <small>Display to App Users</small></h1> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-8"> </div> </div> </div> </div> <div class="main" id="#stats"> <p>statistics</p> </div> <div class="main" id="#donate"> <p>donate</p> </div> <div class="main" id="settings"> <p>settings</p> </div> <div class="main" id="help"> <div class="jumbotron jumbotron-sm"> <div class="container"> <div class="row"> <div class="col-sm-12 col-lg-12"> <h1 class="h1"> Contact us <small>Feel free to contact us</small></h1> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="well well-sm"> <form> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="name"> Company Name</label> <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" /> </div> <div class="form-group"> <label for="email"> Email Address</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span> </span> <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div> </div> <div class="form-group"> <label for="subject"> Subject</label> <select id="subject" name="subject" class="form-control" required="required"> <option value="na" selected="">Choose One:</option> <option value="service">General Customer Service</option> <option value="suggestions">Suggestions</option> <option value="product">Product Support</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="name"> Message</label> <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" placeholder="Message"></textarea> </div> </div> <div class="col-md-12"> <button type="submit" class="btn btn-primary pull-right" id="btnContactUs"> Send Message</button> </div> </div> </form> </div> </div> <div class="col-md-4"> <form> <legend><span class="glyphicon glyphicon-globe"></span>Our office</legend> <address> <strong>Givingest</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone"> P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address> </form> </div> </div> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700); /* 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: #16A085; font-family: 'Roboto', sans-serif; padding-top: 40px; } .main { background-color: #ECF0F1; border: 0px solid #8E44AD; border-radius: 5px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ margin-bottom: 40px; margin-right: 10%; margin-left: 10%; } .btn-nav { text-align: center; background-color: #ECF0F1; border: 0px solid #8E44AD; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ margin-bottom: 40px; } .btn-nav:hover { color: #8E44AD; cursor: pointer; -webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */ transition: color 1s; } .btn-nav.active { color: #8E44AD; padding: 2px; border-top: 8px solid #8E44AD; border-bottom: 8px solid #8E44AD; 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: #8E44AD transparent; display: block; width: 0; z-index: 1; margin-left: -6px; top: 0; left: 50%; } .btn-nav .glyphicon { color: #1ABC9C; 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; } .label { margin: 0; padding: 0; border: 0; } } .jumbotron { margin-top: 0px; background: #8E44AD; color: #FFF; border-radius: 5px 5px 0 0; } .jumbotron-sm { padding-top: 24px; padding-bottom: 24px; } .jumbotron small { color: #FFF; }
var activeEl = 1; $(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: