Question

我正在网站上工作，这是我第一次制作响应式网站，所以我遇到了一些麻烦。

我有一个导航菜单，我希望在特定的屏幕尺寸下折叠成汉堡图标（三个水平条）。目前我有一个这样的东西，有一个普通的导航菜单和另一个移动下拉版本，可以互相改变位置：

<div id="normalnavigation">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</div>

<div id="mobilenavigation">
  <ul>
    <li><img src="Hamburger Icon Here" />
      <ul>
        <li>Line 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
      </ul>
    <li>
  </ul>
</div>

然后在CSS中，这样的事情：

#mobilenavigation { display:none }

@media only screen and (max-width: 600px) {
  #mobilenavigation { 
    display:inherit
  }
  #normalnavigation {
    display:none
  }
}

就上述代码而言，一切正常。但我想知道这是否是正确的做法呢？如果是这样，我似乎无法弄清楚下拉移动菜单工作所需的css代码。 - 所以我很感激任何帮助。感谢。

这是获得响应式导航菜单的正确方法吗？

0 个答案: