响应式导航调整

Question

我正在制作一个响应式菜单，默认情况下会与网站标题内联显示。但是在移动设备上，菜单需要显示为站点标题下方的列表，并且可以通过点击 + 或 - 来切换。除了两个小问题，我已经实现了所有这些。

1. 我似乎无法让菜单显示相对于文档流，以便它与页面上的文本重叠
2. 我需要菜单是整个页面的宽度。

我不确定我是否只需要获取此菜单并将其放在导航之外的自己的 div 中，或者我只是忘记了一些 css 规则。目前设置为：

<nav>
 <div id="nav-div">
  <div id="title"></div>
  <div id="menu-toggle"></div>
  <div id="nav-links">
   <ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
   </ul>
  </div>
 </div>
</nav>

CSS：

#nav-links {
  position:absolute;
  width:100%;
  ul {

  }
  li {
    display:block;
    float: none;
    border-bottom: 1px solid black;
    &:last-child {
      border-bottom: none;
    }
    a {

    }
  }
}

Answer 1

您需要在#nav-links 上设置top 和left 属性。如果你也设置了right，你就不需要width: 100%。也让它position:relative。像这样：

#nav-div {
  position: relative;
  height: 50px;
}
#nav-links {
  position:absolute;
  left: 0;
  right: 0;
  ...
}

将50px 更改为您的导航栏高度。

Answer 2

我最终这样做的方式是：

ul {
  position: absolute;
  width: 100%;
  right: 0px;
  left: 0px;
  li {
    width: 100%;
    a {
      width: @small-width; //defined with my variables
      margin: 0px auto;
      display: block;
    }
  }
}