首页 文章

用于下拉导航的css汉堡菜单

提问于
浏览 次
0

我有一个简单的固定导航栏，其中一个列表元素有一个下拉悬停 .

The problem - 下拉导航使我很难应用 hamburger menu when the screen reaches a certain width .

最初，我试图创建一个小菜单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>

To clarify - 我只需要一个使用css或jQuery的方法，它将以较小的屏幕宽度显示汉堡包菜单 .

谢谢

html css menu

2 回答

  • 0
    <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>

    试试这个..希望这有助于解决您的问题

    回复于
  • 0

    你可以在没有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

    回复于

相关问题