Question

我有一个构建自：

的导航栏

＆＃13;

<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>

＆＃13;

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

该网站已投入生产，无论何时重建，都无法浪费。

由于

Answer 1

有多种方法可以做到这一点，最简单的方法就是一旦视口达到你想要的大小，无论是手机还是平板电脑。添加汉堡按钮以替换导航栏。小造型，你可以使它看起来非常专业。

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;
}

导航栏 - 如何使其响应

1 个答案: