Javascript CSS-创建响应性的顶部导航菜单

对于我的网页（），我想让我的菜单对屏幕的大小敏感，这样当它们太小并且元素不适合时，它就会折叠。我计划添加以下解决方案：，当屏幕较小时，使用“burguer”图标连接所有元素

我可以创建包含不同元素的菜单，添加“burguer”图标，然后在屏幕较大时默认隐藏它。但是，媒体查询和

js

功能一定是错误的，因为当我缩小屏幕时，“burguer”图标会出现，但其他元素不会消失，点击“burguer”不会起任何作用。我猜某处的

id

名称有错误或混乱。可能是吗

在W3的示例中，学校使用

div

选项卡，但我不是。这个例子是否必不可少

/*当用户单击图标时，在向topnav添加和删除“响应”类之间切换*/
函数myFunction（）{
var x=document.getElementById（“nav”）；
如果（x.className==“header\u nav”）{
x、 类名+=“响应”；
}否则{
x、 className=“表头导航”；
}
}

/*标题\u导航------草稿*/
#页面包装器{
垫面：3.5em；
}
#标题导航{
背景：rgba（0,0,0,0）；
盒影：0.25em0 rgba（0,0,0,0）；
游标：默认值；
高度：3.5公分；
左：0；
线高：3.5em；
位置：绝对位置；
排名：0；
宽度：100%；
z指数：100；
}
#标题导航图标{
显示：无；
}
#收割台导航h1{
身高：继承；
左：1.25em；
行高：继承；
保证金：0；
位置：绝对位置；
排名：0；
}
#标题导航{
位置：绝对位置；
右：1em；
排名：0；
}
#收割台导航{
保证金：0；
}
#标题(导航ul li){
显示：内联块；
左边距：1米；
}
#标题(导航ul li a)，
#收割台上的导航距离{
边界：0；
颜色：继承；
显示：内联块；
身高：继承；
行高：继承；
大纲：0；
}
#收割台导航ul li a按钮，
#收割台导航ul跨距按钮{
高度：2米；
线高：2米；
填充：0.1.25em；
}
#收割台导航ul li a:不（.button）：在之前，
#收割台导航ul li跨度：非（.button）：之前{
右边距：0.5em；
}
#收割台导航ul li.激活>a，
#收割台导航ul li.激活>跨度{
颜色：#e44c65；
}
#收割台导航ul li>ul{
显示：无；
}
body.landing#页面包装器{
填充顶部：0；
}
机身着陆#头部导航{
背景：透明；
盒影：无；
位置：绝对位置；
}
/*当屏幕宽度小于600像素时，隐藏除第一个（“主页”）外的所有链接。显示包含打开和关闭topnav（.icon）的链接*/
@媒体屏幕和屏幕（最大宽度：600px）{
#标题导航a：非（：第一个子项）{
显示：无；
}
#标题导航a.图标{
浮动：对；
显示：块；
}
}
/*当用户单击图标时，“responsive”类将通过JavaScript添加到topnav中。该类使topnav在小屏幕上看起来不错（垂直显示链接，而不是水平显示链接）*/
@媒体屏幕和屏幕（最大宽度：600px）{
#标题导航响应{
位置：相对位置；
}
#标题\导航响应a.图标{
位置：绝对位置；
右：0；
排名：0；
}
#标题导航响应a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}

爱德华多·阿尔瓦拉多

以下是一个基于您的代码的小型可复制解决方案：

我添加了一个类，该类固定在我们调整窗口大小时应该保留的链接元素上：

<section id="header_nav">
  <nav id="nav">
    <ul>
      <li class="fixed"><a href="">Home</a></li>
      <li><a href="">Research</a></li>
      <li><a href="">Game-dev</a></li>
      <li><a href="photography">Photography</a></li>
      <li class="fixed hamburguer"><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
    </ul>
  </nav>
</section>

---

我还调整了您的css和js。

这里有一个基于您的代码的小型可复制解决方案：

我添加了一个类，该类固定在我们调整窗口大小时应该保留的链接元素上：

<section id="header_nav">
  <nav id="nav">
    <ul>
      <li class="fixed"><a href="">Home</a></li>
      <li><a href="">Research</a></li>
      <li><a href="">Game-dev</a></li>
      <li><a href="photography">Photography</a></li>
      <li class="fixed hamburguer"><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
    </ul>
  </nav>
</section>

---

我还调整了你的css和js。

在你的css和HTML中，我做了一些修改，因为你的汉堡菜单在你试图隐藏的东西里面，这不是一个好主意。我还稍微调整了你的css，因为你将位置设置为相对，但没有将显示设置为块。希望这有帮助

CSS（第2525-2547行）：

HTML:

---

在CSS和HTML中，我做了一些修改，因为您的汉堡包菜单与您试图隐藏的内容相同，这不是一个好主意。我还稍微调整了CSS，因为您将位置设置为相对，但未将显示设置为块。希望这有帮助

CSS（第2525-2547行）：

HTML:

---

我真的很喜欢！非常感谢。只有一个问题。在w3school的示例中可以看到，第一个链接（“主页”）在崩溃后仍然可用。此外，在小屏幕中，当菜单打开时，问题仍然存在：如果菜单中有许多元素，其中之一是“向下”跳行（）。尽管如此，我还是非常感谢你的帮助！我真的很喜欢！非常感谢。只有一个问题。您可以在w3school的示例中看到，第一个链接（“Hom”）

<!-- Header Navigation Menu -->
            <section id="header_nav">
                <a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a><nav id="nav" class="header_nav">
                    <ul>
                        <li><a href="index"><p style="color:white">Home</p></a></li>
                        <li><a href=""><p style="color:white">Research</p></a></li>
                        <li><a href=""><p style="color:white">Game-dev</p></a></li>
                        <li><a href="photography"><p style="color:white">Photography</p></a></li>

                    </ul>
                </nav>
            </section>