在materializeCSS響應移動導航如何

我一直在試圖找出一種方法來改變我的網絡應用程序的HTML結構使用媒體查詢，以便我的導航崩潰在移動網站上的下拉菜單。看起來改變實際標記的唯一方法是使用jquery，但如果可能的話，我想避免這種情況。在materializeCSS響應移動導航如何

我已經看了所有，但所有的建議在線試用只會導致更多的問題，而不是它解決bc即時通訊使用物化css框架的網站。希望這裏的某個人已經與物化有關，並且已經解決了這個問題。

下面是HTML：

<nav class="nav"> 
    <div class="nav-wrapper"> 
     <a href="#" class="brand-logo left">Game Swap</a> 
     <ul id="nav-mobile" class="right"> 
      <li><a id="homeMenu" href="#">Home</a></li> 
      <li><a id="searchMenu" href="#">Matches</a></li> 
      <li><a id="profileMenu" href="#">Profile</a></li> 
      <li><a id="loginMenu" href="#">Login</a></li> 
      <li><a id="logoutMenu" href="#">Logout</a></li> 
     </ul> 
    </div> 
</nav>

截至目前，該導航工作得很好，因爲所有的資源，直到你得到約620px寬，那麼導航項目開始重疊的標誌。

Here's the materialize documentation如果有幫助。

感謝您提前提供任何幫助。

更新：我已成功使用物化來代替我的導航與漢堡導航。但是，點擊桌面時，沒有下拉菜單。我想到，也許這個漢堡包導航僅僅是一個用於側面導航的按鈕，可以從側面移動到屏幕上。如果不是，那麼代碼有一些其他錯誤。該文件聲稱有一個「下面的例子」，但我沒有看到它。看到這裏：http://materializecss.com/navbar.html#mobile-collapse

我也在文檔準備好結束時初始化jquery行，所以不應該是問題。

更新HTML：

<nav class="nav"> 
    <div class="nav-wrapper"> 
     <a href="#" class="brand-logo left">Game Swap</a> 
     <a href="#" data-activates="mobile-demo" class="button-collapse right"><i class="material-icons">menu</i></a> 
     <ul id="nav-mobile" class="right hide-on-med-and-down"> 
      <li><a id="homeMenu" href="#">Home</a></li> 
      <li><a id="searchMenu" href="#">Matches</a></li> 
      <li><a id="profileMenu" href="#">Profile</a></li> 
      <li><a id="loginMenu" href="#">Login</a></li> 
      <li><a id="logoutMenu" href="#">Logout</a></li> 
     </ul> 
     <ul class="side-nav" id="mobile-demo"> 
      <li><a id="homeMenu" href="#">Home</a></li> 
      <li><a id="searchMenu" href="#">Matches</a></li> 
      <li><a id="profileMenu" href="#">Profile</a></li> 
      <li><a id="loginMenu" href="#">Login</a></li> 
      <li><a id="logoutMenu" href="#">Logout</a></li> 
     </ul> 
    </div> 
</nav>

更新2：我決定把整個事情下拉，使用完全不同的組件。對於有同樣問題的任何人，請參閱以下解決方案

<ul id="dropdown1" class="dropdown-content"> 
    <li><a id="homeMenu" href="#">Home</a></li> 
    <li><a id="searchMenu" href="#">Matches</a></li> 
    <li><a id="profileMenu" href="#">Profile</a></li> 
    <li><a id="loginMenu" href="#">Login</a></li> 
    <li><a id="logoutMenu" href="#">Logout</a></li> 
</ul> 
<nav class="nav"> 
    <div class="nav-wrapper"> 
     <a href="#" class="brand-logo left">Game Swap</a> 
     <ul class="right"> 
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Menu<i class="material-icons right">arrow_drop_down</i></a></li> 
     </ul> 
    </div> 
</nav>

來源

2017-03-20 Colin Aulds

你初始化移動導航欄，jQuery的一面呢？它是強制性的：'$（「。button-collapse」）。sideNav（）;'。另外，我沒有看到「摺疊」按鈕，這也是需要的。 –

我認爲你應該在移動設備上使用** sidenav ** – l2aelba

@ToX和l2aelba，我可以在移動設備上使用sidenav，而無需在桌面上使用它嗎？ Bc媒體查詢不會/不能更改標記。 –

是的，它是移動的，並且隱藏在桌面視圖，但你可以表現出來，但改變了看法，從沒有阻止，請檢查下面的代碼：

@media only screen and (min-width: 993px){ 
nav a.button-collapse { 
    display: block; 
} 
}

原來的顯示。（min-width：993px）上的按鈕摺疊是none;

檢查我創建的codepen，這工作正常。

來源

2017-03-20 08:59:42

在materializeCSS響應移動導航如何

回答

相關問題