Is there a way to create a vertical menu (not dropdown, entirely separate vertical menu on sidebar) by using any bootstrap class? I can create one using my css, but just want to know if there is any builtin class for this in bootstrap, or can it be done using the top-bar with any hack?
This question is related to
css
twitter-bootstrap
here is vertical menu base on Bootstrap http://www.okvee.net/articles/okvee-bootstrap-sidebar-menu it is also support responsive design.
The question is old now.
But if somebody looks here the trick in the current version is to use the nav-stack class, like so:
<nav>
<ul class="nav nav-pills nav-stacked span2">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
You can use menu left sidebar collapse accordion, animated with right arrow
With a few CSS overrides, I find the accordion / collapse plugin works well as a sidebar vertical menu. Here's a small sample of some overrides I use for a menu on a white background. The accordion is placed within a section container:
.accordion-group
{
margin-bottom: 1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border-bottom: 1px solid #E5E5E5;
border-top: none;
border-left: none;
border-right: none;
}
.accordion-heading:hover
{
background-color: #FFFAD9;
}
With Bootstrap 2.0 you can give your tabs the "stackable" class, which makes them stack vertically.
You can use the sidebar class to render list items vertically. Not exactly a menu, but close:
This doesn't quite yet look like what I want, but I accomplished something like
this by stacking nav pills in the leftmost two spans. This is what my app's
app/views/layouts/application.html.erb file looks like:
<!DOCTYPE html>
...
<body>
<!-- top navigation bar -->
<div class="navbar navbar-fixed-top">
...
</div>
<div class="container-fluid">
<!-- the navigation buttons bar on the left -->
<div class="sidebar-nav span2"> <!-- we reserve 2 spans out of 12 for this -->
<ul class="nav nav-pills nav-stacked">
<li class="<%= current_page?(root_path) ? 'active' : 'inactive' %>">
<%= link_to "Home", root_path %>
</li>
<li class="<%= current_page?(section_a_path) ? 'active' : 'inactive' %>">
<%= link_to "Section A", section_a_path %>
</li>
<li class="<%= current_page?(section_b_path) ? 'active' : 'inactive' %>">
<%= link_to "Section B", section_b_path %>
</li>
</ul>
</div>
<div class="container-fluid span10"> <!-- use the remaining 10 spans -->
<%= flash_messages %>
<%= yield :layout %> <!-- the content page sees a full 12 spans -->
</div>
</div> <!-- class="container-fluid" -->
...
</body>
</html>
Now the stacked pills appear on the top left, below the navbar. When the user clicks on
one of them, the corresponding page loads. From the point of view of
application.html.erb, that page has the 10 rightmost spans available for it,
but from the page's view, it has the full 12 spans available.
The button corresponding to the page currently being displayed is rendered as
active, and the others as inactive. Specify the colours for active and inactive
buttons in file app/assets/stylesheets/custom.css.scss (in this case, the
colour for a disabled state is also defined):
@import "bootstrap";
...
$spray: #81c9e2;
$grey_light: #dddddd;
...
.nav-pills {
.inactive > a, .inactive > a:hover {
background-color: $spray;
}
.disabled > a, .disabled > a:hover {
background-color: $grey_light;
}
}
The active pill's colour is not defined, so it appears as the default blue.
File custom.css.scss is included because of the line *= require_tree . in
file app/assets/stylesheets/application.css.
The "nav nav-list" class of Twiter Bootstrap 2.0 is handy for building a side bar.
You can see a lot of documentation at http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php
Responsive utility classes
Easiest way I can think of is to have a vertical left menu AND the collapsing Top Nav in your design and attach/use bootstraps responsive css.
Then just add classes of hidden phone, tablet etc (to suit) to your left nav and hidden desktop etc to the top nav
see: http://twitter.github.com/bootstrap/scaffolding.html#responsive
play around with that and hopefully it should be able to do what you want
Try the following (no custom.css required):
<div class="col-md-2">
<nav>
<ul class="nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</nav>
</div>
You can use Bootstrap's tabs with bootstrap-verticaltabs. This modifies Bootstrap's Tabs to provide an alternative vertical styling. That way you can use the built in tabs in bootstrap and get the vertical menu you are looking for.
No, not in the current one. But you can take a look at the next version by downloading it from github. It has vertical pills and tabs. Maybe that will help? (be aware, it's under construction tho)
Source: Stackoverflow.com