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