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

• Z时代
• 2024-01-10
• 分类：问答

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

谢谢

添

回答：

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

以上是 我的响应式导航栏不显示小屏幕上的链接 的全部内容， 来源链接： utcz.com/qa/264602.html