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

我已经建立了一个带有汉堡图标的定制响应菜单，但是没有Bootstrap-我不想使用Bootstrap

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

Bootstrap模型确实有一个单独的nav和collapse类，但是我不应该仅仅使用一个nav就可以做到这一点吗

以下是我到目前为止得到的JS提琴：

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

<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%的宽度，以使其伸展…但它仍然有点关闭。解决这个问题的最好办法是什么

---

有人有什么想法吗？谢谢你的意见

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

创建具有所需结构的html菜单

决定什么是默认视图。我更喜欢先设计手机，因为你通常有更多的限制，所以当你以后设计桌面视图时，你有更多的选项和空间，对我来说更容易适应

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

一旦完成并开始工作，就可以为其余视图创建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 */
}

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

汉堡按钮呢？创建它并将其放置在移动视图所需的位置。然后，使用相同的媒体查询将其隐藏

这只是我创建响应菜单过程的一个快速描述。我不喜欢有不同的菜单，因为通常很难维护。相同的菜单，但只是改变它的外观

---

我希望它能有所帮助。

您只能保留一个，但您必须添加一组媒体查询CSS，以便在mobile中更改菜单的syle。在您的小提琴中，移动分辨率的导航与较大分辨率的导航不同。您是否正在寻找具有相同导航的解决方案？