Geek Answers Handbook

Double sidebar on the left + Bootstrap 3

I am trying to create a fluid layout with at least one sidebar on the left. I know how to do this, but now I would like to have an extensible sidebar next to the left sidebar. This image is for explanation:

enter image description here

On the left, I have a logo and some navigation elements. When you click one second navigation item, I want to show sub-navigation. But how can I do this? Has anyone come across this example? I really don't know where to start.

For one sidebar:

<div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="#">Navigation 1</a></li> <li><a href="#">Navigation 2</a></li> </ul> </div> </div> </div>
+7
jquery html css twitter-bootstrap
source share
3 answers

You can use a small jQuery script that looks for which sub-navigation to show based on href links that contains an identifier. Like this DEMO :

 $(function () { $(".main").on("click", "a", function () { $(".sub").removeClass("active"); $($(this).attr("href")).addClass("active"); console.log($(".sub ul")); }); });

If you use the HTML structure as follows:

 <div class="container-fluid"> <div class="row"> <div class="col-xs-6 col-sm-3 col-md-2 sidebar"> <div class="logo"> <img src="http://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg" /> </div> <ul class="nav nav-sidebar main"> <li class="active"><a href="#sub1">Navigation 1</a></li> <li><a href="#sub2">Navigation 2</a></li> <li><a href="#sub3">Navigation 3</a></li> </ul> </div> <div class="col-xs-6 col-sm-3 col-md-2 sidebar"> <ul id="sub1" class="nav nav-sidebar sub active"> <li><a href="#">Subnavigation 1.1</a></li> <li><a href="#">Subnavigation 1.2</a></li> <li><a href="#">Subnavigation 1.3</a></li> <li><a href="#">Subnavigation 1.4</a></li> </ul> <ul id="sub2" class="nav nav-sidebar sub"> <li><a href="#">Subnavigation 2.1</a></li> <li><a href="#">Subnavigation 2.2</a></li> <li><a href="#">Subnavigation 2.3</a></li> </ul> <ul id="sub3" class="nav nav-sidebar sub"> <li><a href="#">Subnavigation 3.1</a></li> <li><a href="#">Subnavigation 3.2</a></li> <li><a href="#">Subnavigation 3.3</a></li> <li><a href="#">Subnavigation 3.4</a></li> <li><a href="#">Subnavigation 3.5</a></li> </ul> </div> </div> </div>

And some CSS

 .logo { text-align: center; } .logo img { width: 50%; margin: 20px auto; } .sub { max-height: 0; height: auto; overflow: hidden; transition: max-height 0s; background: #fafafa; } ul.active { max-height: 400px; transition: max-height 1s 0.1s; }
+1
source share

JQuery UI is perfect for this! http://jqueryui.com/tabs/#vertical Just customize this to suit your needs. (Most of this code was taken from the jQuery documentation)

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Vertical Tabs functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function() { $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" ); $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" ); }); </script> <style> //This is the styling that JQuery comes with but can be overridden .ui-tabs-vertical { width: 55em; } .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } .ui-tabs-vertical .ui-tabs-nav li a { display:block; } .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} </style> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nav element 1</a></li> <li><a href="#tabs-2">Nav element 2</a></li> <li><a href="#tabs-3"> Nav element 3</a></li> </ul> <div id="tabs-1"> <h2>Sub nav 1 element </h2> <div id="tabs-2"> <h2>Sub nav 2 element</h2> </div> <div id="tabs-3"> <h2>Sub nav 3 element </h2> <h2>Another sub nav 3 element </h2> </div> </div> </body> </html>
0
source share

As you already use Twitter Bootstrap, why not use Stacked Nav-tabs to show the submenu?

Something like this: (you will need to style the contents for the stream after nav), can wrap them in col to be responsive)

  <div class="sidebar"> <div class=logo"></div> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#pane1" data-toggle="tab">Tab 1</a></li> <li><a href="#pane2" data-toggle="tab">Tab 2</a></li> <li><a href="#pane3" data-toggle="tab">Tab 3</a></li> <li><a href="#pane4" data-toggle="tab">Tab 4</a></li> </ul> </div> <div class="tab-content"> <div id="pane1" class="tab-pane active"> <ul class="nav nav-tabs nav-stacked"> <li ><a>Sub Tab 1</a></li> <li ><a>Sub Tab 2</a></li> <li ><a>Sub Tab 2</a></li> </ul> </div> <div id="pane2" class="tab-pane"> <ul class="nav nav-tabs nav-stacked"> <li ><a>Sub Tab 1</a></li> <li ><a>Sub Tab 2</a></li> <li ><a>Sub Tab 2</a></li> </ul> <div id="pane3" class="tab-pane"> <ul class="nav nav-tabs nav-stacked"> <li ><a>Sub Tab 1</a></li> <li ><a>Sub Tab 2</a></li> <li ><a>Sub Tab 2</a></li> </ul> </div> <div id="pane4" class="tab-pane"> <ul class="nav nav-tabs nav-stacked"> <li ><a>Sub Tab 1</a></li> <li ><a>Sub Tab 2</a></li> <li ><a>Sub Tab 2</a></li> </ul> </div> </div>
0
source share

More articles:


All Articles