简化自定义响应菜单的标记（无 Bootstrap！）

Question

我用汉堡包图标构建了一个自定义响应式菜单，但没有 Bootstrap - 我不想使用 Bootstrap。

问题是我想使用简单的标记来完成此操作，但我必须添加一个单独的导航，我用媒体查询显示/隐藏它，我知道必须有更好的方法，但我不确定如何。

Bootstrap 模型确实有一个带有折叠类的单独导航，但我不应该只使用一个导航就可以做到这一点吗？

这是我目前所掌握的 JS Fiddle：https://jsfiddle.net/zbu7ahmb/10/

在我看来，我不应该需要这么多的标记来完成我想要的。我不想要这个菜单折叠的导航栏：

<div id="header" class="inline-container max-width space-between">
<div>
    <h1>LOGO</h1>
</div>

<nav class="menu inline-container">
    <ul>
        <li class="nav-btn">
            <button id="my_btn" class="nav-link btn-link">Link 1</button>
            <ul class="sub-menu">
                <li class="section">Section 1</li>
                <li><a href="#">Sub link 1</a></li>
                <li><a href="#">Sub link 2</a></li>
                <li class="section row">Section 2</li>
                <li><a href="#">Sub link 1</a></li>
                <li><a href="#">Sub link 2</a></li>
            </ul>
        </li>
        <li class="nav-btn">
            <button class="nav-link btn-link">Link 2</button>
            <ul class="sub-menu">
                <li><a href="#">Sub link 1</a></li>
                <li><a href="#">Sub link 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

<nav class="menu-collapsed">
    <div class="container nav-link" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
    <ul class="sub-menu">
        <li class="section"><h3>Link 1</h3></li>
        <li><a href="#">Sub link 1</a></li>
        <li><a href="#">Sub link 2</a></li>
        <li class="section row"><h3>Link 2</h3></li>
        <li>Section 1</li>
        <li><a href="#">Sub link 1</a></li>
        <li><a href="#">Sub link 2</a></li>
        <li class="row">Section 2</li>
        <li><a href="#">Sub link 1</a></li>
        <li><a href="#">Sub link 2</a></li>
    </ul>
</nav>

难道我不能像这样简单地使用 1 个导航栏：

<div id="header" class="inline-container max-width space-between">
<div>
    <h1>LOGO</h1>
</div>

<nav class="menu inline-container">
    <ul>
        <li class="nav-btn">
            <button id="my_btn" class="nav-link btn-link">Link 1</button>
            <ul class="sub-menu">
                <li class="section">Section 1</li>
                <li><a href="#">Sub link 1</a></li>
                <li><a href="#">Sub link 2</a></li>
                <li class="section row">Section 2</li>
                <li><a href="#">Sub link 1</a></li>
                <li><a href="#">Sub link 2</a></li>
            </ul>
        </li>
        <li class="nav-btn">
            <button class="nav-link btn-link">Link 2</button>
            <ul class="sub-menu">
                <li><a href="#">Sub link 1</a></li>
                <li><a href="#">Sub link 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

最后，请注意，我必须将“菜单折叠子菜单”的宽度设置为 91% 才能使其伸展……但它仍然有点偏离。解决这个问题的最佳方法是什么？

有人有什么想法吗？感谢您的任何意见！

Answer 1

您可以有一个菜单，并且您必须使用 css 媒体查询来更改菜单项的样式，而不是显示/隐藏整个菜单。

1. 使用您需要的结构创建您的 html 菜单。

2. 决定您的默认视图。我更喜欢设计“Mobile First”，因为你通常有更多的限制，所以当你以后设计桌面视图时，你有更多的选择和空间，对我来说更容易适应。

3. 在您的 CSS 文件中为您决定的默认视图创建 css 样式。使菜单在该视图中的外观和行为符合您的要求。

4. 一旦您完成并开始工作，就可以为其余视图创建 CSS 媒体查询了。将该规则放在您为默认视图创建的所有规则之后。现在您无需更改整个菜单，您只需设置菜单和菜单元素的样式以适应新的分布和外观。在大多数情况下，您将使用视口宽度作为 css 媒体查询的参数。如果您的默认样式是针对移动设备的，您可以添加 CSS 媒体查询以在达到特定宽度后更改菜单。比如……

   nav.menu { position: absolute; z-index: 10; width: 100%; background-color: #1c8db0; display: none; }
   nav.menu li.nav-btn { width: 100; }
   nav.menu li.nav-btn ul li { width: 100; }
   /* Your default styles for "mobile" here */
   
   @media only screen and (min-width: 1024px) {
       nav.menu { position: relative; z-index: 0; width: auto; display: block; }
       nav.menu li.nav-btn { width: 250px; }
       nav.menu li.nav-btn ul li { width: 250px; }
       /* Modify and add styles when the viewport is at least 1024px */
   }
   
   @media only screen and (min-width: 1280px) {
       nav.menu li.nav-btn { width: 350px; }
       nav.menu li.nav-btn ul li { width: 350px; }
       /* Modify and add styles when the viewport is at least 1280px */
   }
   

   只需使用样式来调整菜单，但请注意，以这种方式工作会更改已创建的默认样式，因此如果您需要为新宽度更改一种样式，则必须覆盖它。

5. 那么“汉堡按钮”呢？创建它并将其放在必须用于移动视图的位置。然后，只需使用相同的媒体查询将其隐藏。

这只是对我创建响应式菜单的过程的简要说明。我不喜欢有不同的菜单，因为通常更难维护。相同的菜单，但只是改变了它的外观。

希望对你有帮助。