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

<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>Widgets</a></li> <li><a href="http://www.jquery2dotnet.com" data-target-id="pages"><i class="fa fa-file-o fa-fw"></i>Pages</a></li> <li><a href="http://www.jquery2dotnet.com" data-target-id="charts"><i class="fa fa-bar-chart-o fa-fw"></i>Charts</a></li> <li><a href="http://www.jquery2dotnet.com" data-target-id="table"><i class="fa fa-table fa-fw"></i>Table</a></li> <li><a href="http://www.jquery2dotnet.com" data-target-id="forms"><i class="fa fa-tasks fa-fw"></i>Forms</a></li> <li><a href="http://www.jquery2dotnet.com" data-target-id="calender"><i class="fa fa-calendar fa-fw"></i>Calender</a></li> <li><a href="http://www.jquery2dotnet.com" data-target-id="library"><i class="fa fa-book fa-fw"></i>Library</a></li> <li><a href="http://www.jquery2dotnet.com" data-target-id="applications"><i class="fa fa-pencil fa-fw"></i>Applications</a></li> <li><a href="http://www.jquery2dotnet.com" data-target-id="settings"><i class="fa fa-cogs fa-fw"></i>Settings</a></li> </ul> </div> <div class="col-md-9 well admin-content" id="home"> <p> Hello! This is a forked snippet.<br> It is for users, which use one-page layouts. </p> <p> Here's the original one from BhaumikPatel: <a href="http://bootsnipp.com/snippets/featured/vertical-admin-menu" target="_BLANK">Vertical Admin Menu</a> <br><br> <strong>Thank you Bhaumik!</strong> </p> </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:

can u make it responsive, convert into accordion for small screen?

Kris () - 8 years ago - Reply 0

Does anyone know how to adjust the code so "more than one" menu can be put on a webpage?
Another menu I have https://github.com/jellekra... one can just duplicate the JS code and rename the ID.

rotate: false,
startCollapsed: 'false',
collapsible: 'accordion',
setHash: true,
disabled: [],
activate: function(e, tab) {
$('.info').html('Tab ' + tab.id + ' activated!');
activateState: function(e, state) {
$('.info').html('Switched from ' + state.oldState + ' state to ' + state.newState + ' state!');

But this menu doesn't work the same......
Can anyone help?
Ironically this was supposed to have been built to work on "one page" websites, which is what I have, but, lol..... does seem so easy?
http://www.leeuniverse.com "Other Mods" section.

Okay, so got it "mostly" working, by renaming the "ID's" in the HTML code.
But the problem I'm having now is when I go to the second menue, you actually have to "click" a Tab for the content window to show. And if you go back to the first instance of the menu, you again have to actually click a tab for the content window to show. Only on the first display of the first menu is the Home tab active and the content displays.

disqus_UZrzuW8WD3 () - 9 years ago - Reply 0

BTW, for those having "box fitting" problems..... The "container" CSS should look something like this.

.vertical-tabs-container {
position: relative;
display: inline-block;
width: 99%;
margin: auto;

He should have included this in his example for idiots like me who don't know how to code.
I spent a whole day with another tab thing like this one, and then this one trying to figure out how to get the container to work right.
So, add the above or similar to your .CSS for this.

Thank you for the code BTW, and also to the original author...... This was exactly what I've been looking for.
24 hours of Google and nothing was responsive worked right, or looked good, and there was almost no vertical ones.

disqus_UZrzuW8WD3 () - 9 years ago - Reply 0

Thanks, this snippets are great!

Alessandro () - 9 years ago - Reply 0

The snippets is great but the active class is removed as soon as the page is refreshed which is a bit a nuisance to me.. i tried to make it stick but no luck so far

Rabi Shrestha () - 9 years ago - Reply 0

Make use of the # in the url and get the url with javascript. Then you can simply open the right page by taking the #tag.

If you need assistance, mail me -> alex (AT) youngandcreative (DOT) de

Alex () - 9 years ago - Reply 0

This is great! What I've been looking for! Thanks!

Guest () - 10 years ago - Reply 0

i loved it...

Bindi Bhatt () - 10 years ago - Reply 0

"Loved"? :)

Alex () - 10 years ago - Reply 0