html - Bootstrap 3，两个侧边栏导航菜单

Question

我想要做的是创建两个侧边栏导航菜单。一个实际上是一个菜单，但我想要另一个用于功能用途。

还有一个右侧边栏，所以我不能转到另一边。

现在我可以毫无问题地创建一个将与主容器重叠的侧边栏，但是我无法让侧边栏“插入”主容器进入内部并且另一个侧边栏已经就位，这有点令人困惑。

感谢任何帮助。

谢谢

Answer 1

这对你有帮助吗？我仍在研究 jQuery 动画。

$(function () {
  $(".pri-sidebar nav ul li:first-child a").click(function () {
    $(".content").toggleClass("open");
    return false;
  });
});

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
* {font-family: Segoe UI;}
a {text-decoration: none;}
nav ul,
nav ul li {margin: 0; padding: 0; list-style: none;}
.content {padding-left: 50px; position: relative; overflow: hidden; min-height: 400px;}
.pri-sidebar {position: absolute; left: 0; top: 0; background-color: #000; padding: 5px; height: 10000px;}
.pri-sidebar a {color: #fff; padding: 5px; display: block;}
.sub-sidebar {position: absolute; left: 35px; background-color: #333; width: 100px; height: 1000px; display: none;}
.sub-sidebar a {color: #fff; padding: 5px; display: block; line-height: 1; text-align: center;}
h1, h2, p {margin: 0 0 10px; line-height: 1.5;}
.content.open {padding-left: 150px;}
.content.open .sub-sidebar {display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="content">
  <div class="pri-sidebar">
    <nav>
      <ul>
        <li><a href=""><i class="fa fa-tachometer"></i></a></li>
        <li><a href="#"><i class="fa fa-android"></i></a></li>
        <li><a href="#"><i class="fa fa-apple"></i></a></li>
        <li><a href="#"><i class="fa fa-drupal"></i></a></li>
      </ul>
    </nav>
  </div>
  <div class="sub-sidebar">
    <nav>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
      </ul>
    </nav>
  </div>
  <h1>Hello! How are you?</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a, neque quae nobis eos aperiam ratione maxime, magni molestias amet commodi, ducimus doloremque error consequuntur possimus dolore placeat ut voluptate.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil saepe id iusto eaque exercitationem culpa nostrum perferendis quaerat aliquid, nemo quis earum, repellat, consequuntur quas accusamus vel quasi odit eveniet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus debitis, excepturi, laborum sequi et eaque expedita? Ut laborum expedita, molestiae totam culpa suscipit laudantium dolor. Nobis quo alias, similique repudiandae!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti, facilis harum voluptates voluptate vitae, blanditiis voluptatibus error quod nesciunt expedita, aperiam accusamus nam numquam necessitatibus quaerat cumque aut sequi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In provident dolor commodi possimus harum tempore facere atque illo dolore, vel soluta accusamus, sapiente, totam blanditiis adipisci expedita aspernatur officiis saepe.</p>
</div>

带动画(部分打开):

$(function () {
  $(".pri-sidebar nav ul li:first-child a").click(function () {
    $(".content").animate({
      "padding-left": 150
    }, 1000);
    $(".sub-sidebar").css({
      display: "block",
      width: "0px"
    }).animate({
      width: 100
    }, 1000);
    return false;
  });
});

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
* {font-family: Segoe UI;}
a {text-decoration: none;}
nav ul,
nav ul li {margin: 0; padding: 0; list-style: none;}
.content {padding-left: 50px; position: relative; overflow: hidden; min-height: 400px;}
.pri-sidebar {position: absolute; left: 0; top: 0; background-color: #000; padding: 5px; height: 10000px;}
.pri-sidebar a {color: #fff; padding: 5px; display: block;}
.sub-sidebar {position: absolute; left: 35px; background-color: #333; width: 100px; height: 1000px; display: none; overflow: hidden;}
.sub-sidebar a {color: #fff; padding: 5px; display: block; line-height: 1; text-align: center;}
h1, h2, p {margin: 0 0 10px; line-height: 1.5;}
.content.open {padding-left: 150px;}
.content.open .sub-sidebar {display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="content">
  <div class="pri-sidebar">
    <nav>
      <ul>
        <li><a href=""><i class="fa fa-tachometer"></i></a></li>
        <li><a href="#"><i class="fa fa-android"></i></a></li>
        <li><a href="#"><i class="fa fa-apple"></i></a></li>
        <li><a href="#"><i class="fa fa-drupal"></i></a></li>
      </ul>
    </nav>
  </div>
  <div class="sub-sidebar">
    <nav>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
      </ul>
    </nav>
  </div>
  <h1>Hello! How are you?</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a, neque quae nobis eos aperiam ratione maxime, magni molestias amet commodi, ducimus doloremque error consequuntur possimus dolore placeat ut voluptate.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil saepe id iusto eaque exercitationem culpa nostrum perferendis quaerat aliquid, nemo quis earum, repellat, consequuntur quas accusamus vel quasi odit eveniet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus debitis, excepturi, laborum sequi et eaque expedita? Ut laborum expedita, molestiae totam culpa suscipit laudantium dolor. Nobis quo alias, similique repudiandae!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia deleniti, facilis harum voluptates voluptate vitae, blanditiis voluptatibus error quod nesciunt expedita, aperiam accusamus nam numquam necessitatibus quaerat cumque aut sequi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In provident dolor commodi possimus harum tempore facere atque illo dolore, vel soluta accusamus, sapiente, totam blanditiis adipisci expedita aspernatur officiis saepe.</p>
</div>