html - 用于下拉导航的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>

试试这个..希望这可以帮助解决你的问题