引導側面菜單：收起，儘量減少小屏幕上

我在看這個主題，正是完美的東西我要找（邊欄明智）：http://themesdesign.in/webadmin_1.1/layouts/green/index.html 引導側面菜單：收起，儘量減少小屏幕上

我想要的菜單按鈕擴展/最小化側欄，同時仍保留所有側欄菜單。
當它在XS屏幕中時，我想隱藏側欄，但是當按下該菜單按鈕時彈出。

這是我在代碼至今：

 <nav class="navbar-default navbar-static-side" role="navigation"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#side-menu" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <div class="sidebar-collapse hidden-xs"> 
      <ul class="nav navbar-collapse collapse" id="side-menu"> 
       <li class="nav-header"> 
        <h2 style="color: #e8e8e8"></h2> 
        <h6 class="" style="color:#808080;">By: </h6> 
       </li> 
       <li> 
        <a class="active" data-toggle="collapse" data-target="#firstMenu" aria-expanded="true" aria-controls="navbar"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a> 
        <ul class="side-menu-ul collapse in" id="firstMenu"> 
         <li><a href="index-2.html">Dashboard v.1</a></li> 
         <li class="active"><a href="dashboard_2.html">Dashboard v.2</a></li> 
         <li><a href="dashboard_3.html">Dashboard v.3</a></li> 
         <li><a href="dashboard_4_1.html">Dashboard v.4</a></li> 
         <li><a href="dashboard_5.html">Dashboard v.5 </a></li> 
        </ul> 
       </li> 
       <li> 
        <a data-toggle="collapse" data-target="#secondMenu" aria-expanded="false" aria-controls="navbar"><i class="icon ion-email"></i><span>Mail Box</span> </a> 
        <ul class="side-menu-ul collapse" id="secondMenu"> 
         <li><a href="mail-inbox.html">Inbox</a></li> 
         <li><a href="mail-compose.html">Compose Mail</a></li> 
         <li><a href="mail-single.html">Single Mail</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </nav>

有沒有太大的設計經驗，我不是如何從這裏着手十分肯定。特別是點擊按鈕的部分最小化側邊導航欄。任何人都可以幫助我嗎？

編輯：我剛剛在這裏找到了另一個很好的例子：http://blog.codeply.com/2016/05/18/bootstrap-sidebar-responsive-examples/「左側側邊欄摺疊爲圖標」具有我正在尋找的內容。但是，這個問題是，當它摺疊成圖標時，它不顯示任何菜單子項。

來源

2017-07-30 FerX32

單擊按鈕時，可以使用單擊事件來更新應用程序的狀態。

https://developer.mozilla.org/en-US/docs/Web/Events/click

因爲你是從一個CSS狀態到另一個與你的側邊欄，你最好的選擇很可能是使在CSS中這兩種解決方案。這樣，您可以通過按鈕的onclick事件更改父容器類。

如果你想關閉它，比如你將一個closed類添加到您的側邊欄，讓你的closed CSS向下級聯使用：

.closed .child-element {}

要定位關閉狀態的子元素。

來源

2017-07-30 23:17:07

引導側面菜單：收起，儘量減少小屏幕上

回答

相關問題