Question

我创建了一个菜单，该菜单在小屏幕上显示为下拉菜单，并在较大屏幕上显示在浏览器顶部的内嵌。除了调整浏览器大小时，它的工作方式非常完美。

当您将浏览器从大屏幕缩放到小屏幕时，下拉导航会暂时显示，然后再向上滑动到屏幕顶部。已添加到.header .nav的转换，以便正常进出。

欢迎提出任何建议，特别是那些不需要javascript的建议（我已经尝试了解javascript）。如果可以的话，我也想继续过渡，因为客户已经看过了。

＆＃13;

var navTop = document.querySelector('#nav');
var menuBtn = document.querySelector('#js-nav-btn');

if (navTop) {
  document.querySelector('#js-nav-btn').addEventListener('click', function(e) {
    e.preventDefault();
    if (navTop.getAttribute('data-state') == 'expanded') {
      navTop.setAttribute('data-state', 'collapsed');
    } else {
      navTop.setAttribute('data-state', 'expanded');
    }
  });
} else {};

＆＃13;

* {
  padding: 0;
  margin: 0;
}
#container {
  height: 40em;
  width: 100%;
  background-color: red;
}
/* header */

.header {
  width: 100%;
  display: block;
  padding: 0;
  position: relative;
  background-color: #f3f4f7;
  z-index: 100;
}
.header-bg {
  position: absolute;
  background-color: #f3f4f7;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 93;
}
.header .logo {
  width: 72px;
  height: 72px;
  background-color: blue;
  z-index: 101;
  position: relative;
}
.header .nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: yellow;
  z-index: 92;
  -webkit-transition: top 0.5s ease;
  -moz-transition: top 0.5s ease;
  -o-transition: top 0.5s ease;
  transition: top 0.5s ease;
}
.header .nav ul {
  position: relative;
}
.header .nav li {
  line-height: 6;
  font-size: 1em;
  padding-left: 1.3em;
}
.header .main-nav a {
  display: block;
}
/* nav states. Show and hide */

.nav[data-state="collapsed"] {
  top: -50em;
  opacity: 1;
  z-index: -5;
}
.nav[data-state="expanded"] {
  top: 56px;
  opacity: 1;
  z-index: 30;
}
.menu-btn {
  position: absolute;
  top: 1em;
  right: 2em;
  bottom: 0;
  z-index: 100;
}
.menu-btn-div {
  height: 4px;
  width: 25px;
  background-color: #9bacb5;
}
.menu-btn .menu-btn-top {
  margin-top: 0;
}
.menu-btn .menu-btn-mid {
  margin-top: 5px;
}
.menu-btn .menu-btn-bot {
  margin-top: 5px;
}
@media all and (min-width: 40em) {
  .menu-btn {
    display: none;
  }
  .nav,
  .nav[data-state="collapsed"],
  .nav[data-state="expanded"] {
    display: block;
    opacity: 1;
    z-index: 94;
  }
  .header .nav {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: transparent;
    width: 100%;
  }
  .header .main-nav {
    width: 50%;
    position: absolute;
    top: 2em;
    right: 5em;
  }
  .header .main-nav li {
    padding-left: 0.75em;
  }
  .header .nav li {
    display: inline-block;
    line-height: 1;
  }
}

＆＃13;

<header id="header" class="header">
  <div class="header-bg"></div>
  <!--header-bg is there so you can't see the mobile nav overtop of the header bar when it expands-->

  <div class="logo">
  </div>

  <nav id="nav" class="nav" data-state="collapsed">
    <div class="main-nav">
      <ul class="nav top-nav">
        <li class=""><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
    </div>
  </nav>
  <a class="menu-btn" id="js-nav-btn" href="#">
    <!--hamburger menu icon-->
    <div class="menu-btn-div menu-btn-top"></div>
    <div class="menu-btn-div menu-btn-mid"></div>
    <div class="menu-btn-div menu-btn-bot"></div>
  </a>

</header>

<div id="container">
  <!-- main page content goes here-->
</div>

＆＃13;

的jsfiddle： http://jsfiddle.net/meg/eek50292/7/（缩放＆＃34;结果＆＃34;制表符然后向下看以查看效果）

Answer 1

一个选项是在max-width小于40em时自动隐藏菜单：

@media all and (max-width: 40em){
    .nav[data-state="collapsed"]{
        visibility: hidden;
    }
        .nav[data-state="expanded"]{
        visibility: visible;
    }
}

小提琴在这里：http://jsfiddle.net/mfwbe34m/ - 这就是你要找的东西吗？

移动导航无法正确定位调整大小

1 个答案: