Question

我正在尝试创建一个流畅的布局，左侧至少有一个侧边栏。我知道怎么做但现在我想在左侧边栏旁边有一个可扩展的侧边栏。这是一张图片来解释：

enter image description here

在左边我首先有一个徽标和一些导航元素。当您单击第二个导航元素时，我想显示一个子导航。但是我怎么能这样做呢？有人遇到过这样的例子吗？我真的不知道从哪里开始。

对于一个侧边栏：

<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>

Answer 1

您可以使用一个小的jQuery脚本，该脚本根据包含id的链接href查找要显示的子导航。像这样 DEMO ：

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

如果您使用这样的HTML结构：

<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>

还有一些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;
}

Answer 2

JQuery UI非常适合这个！ http://jqueryui.com/tabs/#vertical 只需根据您的需求设计。（此代码的大部分来自JQuery的文档）

<!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>

Answer 3

您已经在使用Twitter Bootstrap，为什么不使用Stacked Nav-tabs来显示子菜单？

这样的事情:(需要在导航后将内容设置为流式传输）可以将它们包装在col中以便响应）

 <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>

左侧双侧边栏+ Bootstrap 3

3 个答案: