发表新帖
发表新帖

Vertical Menu in Bootstrap

后端 未结
关注
12 2156
粉色の甜心
粉色の甜心 2021-02-06 23:22

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

相关标签:
12条回答
  • 一个人的身影
    2021-02-07 00:06

    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:  #ffffdffffd;
...
.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.

    0 讨论(0)
  • 栀梦
    2021-02-07 00:11

    here is vertical menu base on Bootstrap http://www.okvee.net/articles/okvee-bootstrap-sidebar-menu it is also support responsive design.

    0 讨论(0)
  • 悲&欢浪女
    2021-02-07 00:13

    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)

    0 讨论(0)
  • 旧巷少年郎
    2021-02-07 00:13

    You can use the sidebar class to render list items vertically. Not exactly a menu, but close:

    http://twitter.github.com/bootstrap/examples/fluid.html

    0 讨论(0)
  • 抹茶落季
    2021-02-07 00:17

    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;
}
    0 讨论(0)
  • 情深已故
    2021-02-07 00:18

    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.

    Bootstrap Vertical Tabs

    https://github.com/entropillc/bootstrap-verticaltabs

    0 讨论(0)
 看不清?
提交回复
热议问题