Question

到目前为止，我在下面提供了一个jsfiddle和我的代码。我当前的问题是，当我按下菜单图标（一旦屏幕变小时出现），没有任何反应。我希望点击这些元素列表就像点击这样的网站：https://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/

这是我与JsFiddle的链接：

`HTML：

            <a href="#" class="header_icon" id="header_icon"></a>
            <a href="Index.html" class="header_logo" style="height: 0px">
                <img src="images/brandlogoNAV.png" height="57.7px" width="190px">
            </a>

                <nav class="menu" id="mymenu">
                    <li><a class="active" href="Index.html">HOME</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">OUR APPROACH</a></li>
                    <li><a href="#">CONTACT</a></li>
                    <li><a href="javascript:void(0);" style="font-size:10px;" class="icon" onclick="myFunction()">&#9776;</a></li>
                </nav>

        </header>

CSS：

.header {
    position: fixed;
    left: 0;
    right: 0;
    height: 58px;
    background-color: #272727;
}


.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #272727;
    font-family: Century Gothic, sans-serif;
    font-size: 11px;
    float: left;
    display: inline-block;
}


.menu li {
    float: left;
    border-right: 1px solid black;
    display: inline;
}


.menu a {
    display: block;
    color: white;
    text-align: center;
    padding: 22px 50px;
    text-decoration: none;
    border: 1px;
    float: left;
}

.menu a:hover:not(.active) {
    background-color: #111;
}

.menu a.active {
    background-color: #52BA56;
}

.header_logo {
    float: right;
}

.menu .icon {
    display: none;
}

.icon {
    background-color: #272727;
}


@media screen and (max-width: 850px) {
    .menu li:not(:last-child) {
        display: none;
    }

    .menu a.icon {
        float: left;
        display: block;
    }
}

@media screen and (max-width: 850x) {
  .menu.responsive {position: relative;}
  .menu.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .menu.responsive li {
    float: none;
    display: block;
    text-align: left;
  }

}

的jQuery

function myFunction() {
    var x = document.getElementById("mymenu");
    if (x.className === "menu") {
        x.className += " responsive";
    } else {
        x.className = "menu";
    }
}

`https://jsfiddle.net/timothykeyseraude/wx7te9Lq/4/

谢谢，

添

Answer 1

首先：你应该摆脱<a href="javascript(void)">。一般来说，当你需要一个可点击的元素时，没有href，这是一个使用button的绝佳机会。 :)它对于可访问性更好，您不必设置无用的href属性。

现在关于你的问题：你的第二个媒体查询有一个错字。

@media screen and (max-width: 850x)` //(missing the p of "px").

您可以在此处找到一个带有按钮而不是空链接的工作示例：https://jsfiddle.net/pLx0jLws/

我的响应式导航栏不会在较小的屏幕上显示链接

1 个答案: