响应式导航调整

Question

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

我似乎无法让菜单相对于文档流显示，以使其与页面上的文本重叠
我需要菜单占满页面宽度。

我不确定我是否只需要使用此菜单并将其放在导航之外自己的 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;
    }
  }
}

响应式导航调整

Responsive nav tweak

html

css

responsive-design