Double sidebar on the left + Bootstrap 3
Question
I'm trying to create a fluid layout with at least one sidebar at the left. I know how to do this but now I would like to have an expandable sidebar next to the left sidebar. This is an image to explain:
In the left I have at first a logo and some navigation elements. When you click one the second navigation element I want to show a subnavigation. But how can I do this? Has someone come across an example of this? 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>
3 answers
solution1
1 ACCPTED 2014-03-27 21:52:54
You can use a small jQuery script that looks up which sub navigation to show based on the links href, which contains the id. Like this DEMO :
$(function () {
$(".main").on("click", "a", function () {
$(".sub").removeClass("active");
$($(this).attr("href")).addClass("active");
console.log($(".sub ul"));
});
});
If you use a HTML structure like this:
<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;
}
solution2
0 2014-03-27 21:13:51
JQuery UI is perfect for this! http://jqueryui.com/tabs/#vertical Just style this according to your needs. (Majority of this code was taken from JQuery's 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>
solution3
0 2014-03-28 16:33:05
Being your already using Twitter Bootstrap why not use Stacked Nav-tabs, to show the submenus?
Something like this: (will need to style content to flow after nav) could 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.