html - 导航栏 - 如何使其响应

Question

我有一个导航栏是从:

<div>
  <span>Some Text</span>
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li>Item5</li>
  </ul>
  <select>
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
    <option>Option4</option>
  </select>
</div>

我想知道如何使用这个已经构建好的导航栏并使其在浏览器窗口调整大小时做出响应。

该网站正在制作中，不能浪费任何时间重新构建它。

谢谢

Answer 1

有多种方法可以做到这一点，最简单的方法是视口(viewport)达到您想要的大小，无论是移动设备还是平板电脑。添加一个汉堡按钮来替换导航栏。很少的造型，你可以让它看起来很专业。

https://github.com/viljamis/responsive-nav.js

我发现此链接对此进行了相当详细的介绍，可能会有所帮助。

示例:

@media (max-width: 1024px) { /*This is your tablet view */
  .navigation_bar {
    display: none;
  }
}

@media (max-width: 600px) { /*This is your mobile view view */
  .navigation_bar {
    display: none;
    /* In your mobile view you would display your current navigation bar to:
       display: none; and then change the class on your burger button image. */
  }
  .burger-button-nav {
   display: block;
}