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