具有固定導航欄的可摺疊邊欄

Question

我正在嘗試創建可摺疊的邊欄，並找到示例here。

我想改變它，以便有：

• 的「坍塌」欄保持部分可見（以便具有減少到按鈕 菜單鏈接）;
• 側邊欄本身上的「摺疊」按鈕;
• 右側主頁面上的固定導航欄。

我在網上找不到示例，但我試圖在「Windows 10預覽」應用程序中複製接口（查看郵件或日曆應用程序）。

在此先感謝您的幫助。

Answer 1

我找到了這個給你 Sidebar icon

您可以通過導航欄頂部固定

Answer 2

混合此HTML部分

<div id="wrapper"> 

     <!-- Sidebar --> 
     <div id="sidebar-wrapper"> 
      <ul class="sidebar-nav"> 
       <li class="sidebar-brand"> 
        <a href="#"> 
         Start Bootstrap 
        </a> 
       </li> 
       <li> 
        <a href="#">Dashboard</a> 
       </li> 
       <li> 
        <a href="#">Shortcuts</a> 
       </li> 
       <li> 
        <a href="#">Overview</a> 
       </li> 
       <li> 
        <a href="#">Events</a> 
       </li> 
       <li> 
        <a href="#">About</a> 
       </li> 
       <li> 
        <a href="#">Services</a> 
       </li> 
       <li> 
        <a href="#">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /#sidebar-wrapper --> 

     <!-- Page Content --> 
     <div id="page-content-wrapper"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <h1>Simple Sidebar</h1> 
         <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
         <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> 
         <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- /#page-content-wrapper --> 

    </div> 

Jquery的一部分

$("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 
    }); 

請參閱本DEMO