css下拉菜單漢堡菜單

Question

我有一個簡單的固定導航欄，其中一個列表元素有一個下拉懸停。

問題 - 下拉導航，這樣就很難對我來說，當屏幕達到一定寬度申請一個漢堡菜單。

最初，我試圖創建一個小的菜單div，將隱藏，然後顯示在一定的寬度，這不幸的是沒有工作。

我誠實地迷失在如何做到這一點。

這裏是代碼 - 這裏是一個codepen

CSS -

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
    } 

/* clear fix */ 
.c-f::after { 
    content: ""; 
    display: table; 
    clear: both; 
    } 

    ul, ol { 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
} 

    .large-trunk { 
    width: 100%; 
    max-width: 1700px; 
    margin-right: auto; 
    margin-left: auto; 
    } 

    .inline-block-container > * { 
    display: -moz-inline-stack; 
    display: inline-block; 
    } 

/* Grid Units */ 
.col-1 {width:100%;} 

body { 
    margin: 0; 
} 

/* Links ------------------*/ 

a { 
    color: #000000; 
    text-decoration: none; 
} 

a:hover { 
    color: #ffd800 !important; 
} 

#menu-menu a:hover { 
    text-decoration: underline; 
    opacity: 0.6; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 



/* Typography ------------------*/ 

html { 
    font-family: 'Avenir Book', sans-serif; 
    font-weight: 200; 
    font-style: normal; 
    font-size: 15px; 
    line-height: 1.35em; 
} 


/* Navigation ------------------*/ 

.header-menu { 
    position:fixed; 
    top:0px; 
    border-bottom: 1px solid #ddd; 
    background-color: #fff; 
    z-index: 10; 
} 

.header-menu ul li a { 
    padding: 0 2.5rem; 
    line-height: 3.5rem; 
    display: block; 
} 

.main-menu { 
    margin: 0px auto; 
    overflow: hidden; 
    padding-left: 5rem; 
} 

.home-logo-container { 
    float: left; 
    line-height: 3.5rem; 
    border-right: 1px solid #ddd; 
} 

#menu-menu { 
    text-align:center; 
    padding-right: 0.6rem; 
} 

.sub-menu-item { 
    display: none; 
    position: absolute; 
    overflow: hidden; 
    border: 1px solid #ddd; 
} 

.sub-menu:hover .sub-menu-item { 
    display: block; 
    width: 200px; 
} 



/* mobile nav ----------------*/ 
.sm-logo { 
    display: none; 
} 

HTML -

<div class="header-menu col-1"> 
    <!-- .mobile-only-logo --> 
    <div class="sm-logo"> 
    <img src=""> 
    </div> 
    <div class="main-menu large-trunk float-container"> 
    <div class="home-logo-container"> 
     <a href="#" class="home-link"> 
      Rare Select &emsp; 
      </a> 
    </div> 
    <!-- .main-navigation --> 
    <nav id="site-nav" class="main-nav float-container"> 
     <div class="menu-container"> 
     <ul id="menu-menu" class="inline-block-container"> 
      <li> 
      <a href="#">Home</a> 
      </li> 
      <li class="sub-menu"> 
      <a href="#">Info</a> 
      <ul class="sub-menu-item"> 
       <li> 
       <a href="#">About us</a> 
       </li> 
       <li> 
       <a href="#">T's & C's</a> 
       </li> 
       <li> 
       <a href="#">Find us</a> 
       </li> 
      </ul> 
      </li> 
      <li> 
      <a href="#">Newsletter</a> 
      </li> 
      <li> 
      <a href="#">Contact</a> 
      </li> 
     </ul> 
     </div> 
    </nav> 
    </div> 
</div> 

爲了澄清 - 我只是需要一種方法使用CSS或jQuery的那將在較小的屏幕寬度上顯示漢堡菜單。

感謝

Answer 1

<nav class="navbar navbar-fixed-top navbar-bootsnipp" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" onclick="openMenuNav()"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="{{ url('/') }}">Rare Select</a> 
     </div> 

     <div class="menunav " id="menuNav"> 
      <ul class="nav navbar-nav"> 
       <li> 
     <a href="#">Home</a> 
     </li> 
     <li class="sub-menu"> 
     <a href="#">Info</a> 
     <ul class="sub-menu-item"> 
      <li> 
      <a href="#">About us</a> 
      </li> 
      <li> 
      <a href="#">T's & C's</a> 
      </li> 
      <li> 
      <a href="#">Find us</a> 
      </li> 
     </ul> 
     </li> 
     <li> 
     <a href="#">Newsletter</a> 
     </li> 
     <li> 
     <a href="#">Contact</a> 
     </li> 
      </ul> 



     </div> 

    </div> 
</nav> 

試試這個..希望這可以幫助您解決問題

Answer 2

你可以做到這一點沒有的jQuery或JavaScript。所有你需要使用的是CSS媒體查詢。媒體查詢只允許您在滿足特定條件時顯示內容。在這種情況下，您的視口寬度必須符合某些約束條件。

對媒體查詢的基本格式是：

@media (/* Condition */) { 
    /* CSS for when condition is met. */ 
} 

如果您運行下面的代碼片段中，媒體查詢導致漢堡菜單隻出現在屏幕小於768px寬。這是因爲一旦寬度爲768px或更大，媒體查詢得到滿足，所以CSS內部運行，並將圖像的display屬性設置爲none。

img { 
 
    width: 100px; 
 
    display: block; 
 
} 
 

 
@media (min-width: 768px) { 
 
    img { 
 
    display: none; 
 
    } 
 
}

<html> 
 
<body> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png"> 
 
</body> 
 
</html>

你可以閱讀更多有關媒體查詢的MDN。 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries