Javascript CSS在屏幕上水平和垂直切换导航重新调整大小

我正在尝试实现一个响应性导航。以下是我迄今为止所做的工作：

出于某种原因，Javascript不起作用，菜单也不显示在JS FIDLE中，但在我用标记包装的代码中效果很好

在当前状态下，导航链接正确显示在580px以上，但菜单图标仍然可见。我想菜单图标是可见的，只有当显示器低于580像素以上580只是链接

以下是我的CSS，用于在媒体查询开始之前进行导航：

#navigation {
 max-width: 100%;
 background-color: #333;
 padding: 0 1.5% 0 1.5%;
 margin: 0px;
}

#navigation ul {
 padding: 0px;
}

#navigation ul li {
 display: inline-block;
 padding: 10px 1.5% 10px 1.5% ;
}

#navigation ul li a {
 text-decoration: none;
 color: #ffffff;
 font-size: 1.2em;
}

#navigation ul li a:hover {
 color: #000000;
 text-decoration: none;
}

感谢您的帮助。

检查

基本上，js代码需要在加载元素后加载

var originalNavClasses;

function toggleNav() {
    var elem = document.getElementById('navigation_list');
    var classes = elem.className;
    if (originalNavClasses === undefined) {
        originalNavClasses = classes;
    }
    elem.className = /expanded/.test(classes) ? originalNavClasses : originalNavClasses + ' expanded';
}

---

当您使用

onload

或

onDomReady

时，您的代码被包装在另一个函数中，该函数在

load

或

ready

事件中调用。因此，您的函数无法从该函数外部访问，因此您的javascript代码无法在JSFIDLE中工作

试试这个

.menu_button
{
     display:none;
}

---

您根本没有告诉按钮隐藏，所以只需将其添加到主CSS中即可

.menu_button {
display: none;
}

当媒体查询开始时，该按钮变为可见

---

这里有一种方法可以实现这一点。

@仅媒体屏幕和（最小宽度：580px）{
.隐藏{
显示：无；
}
}

---

您可以在菜单按钮中添加一个类，当显示大于580px时，该类告诉它隐藏。

典型。这么简单！谢谢你发现了Paulie，谢谢你的帮助。

@media only screen and (min-width : 580px) {
  .hide{
    display: none;
  }
}

    <a class="menu_button hide" href="#footer_nav" onclick="toggleNav(); return false;">&#9776;  MENU</a>