"Vertical Admin Menu Single Page jQuery"
Bootstrap 3.0.0 Snippet by rmashhoon

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="col-md-3"> <ul class="nav nav-pills nav-stacked admin-menu"> <li class="active"><a href="#" data-target-id="home"><i class="fa fa-home fa-fw"></i>Home</a></li> <li><a href="http://www.jquery2dotnet.com" data-target-id="widgets"><i class="fa fa-list-alt fa-fw"></i>About</a></li> <li><a href="http://www.jquery2dotnet.com" data-target-id="pages"><i class="fa fa-file-o fa-fw"></i>Services</a></li> <li><a href="http://www.jquery2dotnet.com" data-target-id="charts"><i class="fa fa-bar-chart-o fa-fw"></i>Analytics</a></li> <li><a href="http://www.jquery2dotnet.com" data-target-id="table"><i class="fa fa-table fa-fw"></i>Contact</a></li> </ul> </div> <div class="col-md-9 well admin-content" id="home"> <form class="form-horizontal" method="post" action="save.php"> <fieldset> <!-- Form Name --> <legend>Website Options</legend> <!-- Text input--> <div class="control-group"> <label class="control-label" for="Title">Title</label> <div class="controls"> <input id="Title" name="title" type="text" value="" class="input-xlarge"> <p class="help-block">help</p> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="Tag">Tag Line</label> <div class="controls"> <input id="Tag" name="tagline" type="text" value="" class="input-xlarge"> <p class="help-block">help</p> </div> </div> <!-- Textarea --> <div class="control-group"> <label class="control-label" for="description">Description</label> <div class="controls"> <textarea id="description" name="short"></textarea> </div> </div> <!-- Button --> <div class="control-group"> <label class="control-label" for="singlebutton"></label> <div class="controls"> <button id="singlebutton" name="singlebutton" class="btn btn-primary">Save</button> </div> </div> </fieldset> </form> </div> <div class="col-md-9 well admin-content" id="widgets"> Widgets </div> <div class="col-md-9 well admin-content" id="pages"> Pages </div> <div class="col-md-9 well admin-content" id="charts"> Charts </div> <div class="col-md-9 well admin-content" id="table"> Table </div> <div class="col-md-9 well admin-content" id="forms"> Forms </div> <div class="col-md-9 well admin-content" id="calender"> Calender </div> <div class="col-md-9 well admin-content" id="library"> Library </div> <div class="col-md-9 well admin-content" id="applications"> Applications </div> <div class="col-md-9 well admin-content" id="settings"> Settings </div> </div> </div>
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); body{margin-top:20px;} .fa-fw {width: 2em;}
$(document).ready(function() { var navItems = $('.admin-menu li > a'); var navListItems = $('.admin-menu li'); var allWells = $('.admin-content'); var allWellsExceptFirst = $('.admin-content:not(:first)'); allWellsExceptFirst.hide(); navItems.click(function(e) { e.preventDefault(); navListItems.removeClass('active'); $(this).closest('li').addClass('active'); allWells.hide(); var target = $(this).attr('data-target-id'); $('#' + target).show(); }); });

Related: See More


Questions / Comments: