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

-1

我已经提供了一个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/

谢谢

添

来源

2017-12-27 TimothyKA

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

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

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

你可以找到工作的例子，一个按钮，而不是一个空的链接，在这里：https://jsfiddle.net/pLx0jLws/

来源

2017-12-27 12:25:06 Rambobafet

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

回答

相关问题