模仿Bootstrap菜單功能

Question

你好我有一個問題，我需要一些指導/幫助創建一個菜單，如果屏幕太小而無法顯示原始菜單，則用按鈕替換菜單。我知道Bootstrap爲你做了這個，但由於實施限制，我無法使用該庫。因此，我研究了Bootstrap的功能，並試圖模仿，但我仍然需要一些幫助來完成它。

我有以下的HTML代碼：

<div class="navbar navbar-default main-nav"> 
    <div class="container"> 
     <div class="navbar-header" tabindex="-1"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-nav" aria-expanded="false"> 
       <span class="sr-only">Mobile navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse" tabindex="-1"> 
      <div class="nav navbar-nav" tabindex="-1"> 
       <div class="menuitem_wrapper" tabindex="-1"> 
        <a class="home_button not_active" href="#"></a> 
        <div class="dropdown-menu" tabindex="-1"> 
         <a href="#">My data</a> 
        </div> 
       </div> 
       <div class="menuitem_wrapper" tabindex="-1"> 
        <a href="#">Menu 1</a> 
        <div class="dropdown-menu" tabindex="-1"> 
         <a href="#">Submenu1</a> 
         <a href="#">Submenu2</a> 
        </div> 
       </div> 
       <div class="menuitem_wrapper" tabindex="-1"> 
        <a class="active" href="#">Menu 2</a> 
        <div class="dropdown-menu" tabindex="-1"> 
         <a href="#">submenu1</a> 
         <a href="#">submenu2</a> 
        </div> 
       </div> 
       <a href="#">FAQ</a> 
       <a href="#">Contact</a> 
       <a href="#">Logout</a></div> 
     </div> 
    </div> 
</div> 

可以在這裏看到：JSFIDDLE。現在，無論何時調整屏幕大小，都會出現一個按鈕，每當您單擊它時，菜單就會垂直創建而不是水平創建。

這工作完美，但當我將屏幕調整爲大屏幕尺寸（我使用媒體查詢）時我需要做些什麼，我想將當前垂直實現重置爲原始水平實現。

正如我剛纔所說我使用媒體查詢顯示/隱藏按鈕：

/* Media Queries */ 
@media (min-width: 768px) { 
    .container { 
     width: 750px; 
    } 
    .navbar { 
     border-radius: 0; 
    } 
    .container>.navbar-header { 
     margin-right: 0; 
     margin-left: 0; 
    } 
    .navbar-header { 
     float: left; 
    } 
    .navbar-toggle { 
     display: none; 
    } 
    .container>.navbar-collapse { 
     margin-right: 0; 
     margin-left: 0; 
    } 
    .navbar-collapse.collapse { 
     display: block !important; 
     height: auto !important; 
     padding-bottom: 0; 
     overflow: visible !important; 
    } 
    .navbar-collapse { 
     width: auto; 
     border-top: 0; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
    } 

} 

Answer 1

首先，這是創建一個菜單可怕的方式。

但這裏有一個修正，添加另一個@media查詢的max-width:

@media (max-width:768px) { 
.show-menu .navbar-nav a, .show-menu .menuitem_wrapper { 
    width:100%; 
} 
    .show-menu { 
     display: block !important; 
} 
} 

編輯： 也改變addClass到toggleClass -

$(".navbar-collapse").toggleClass('show-menu');