滑出导航不工作

问题描述：

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

body {margin:0;} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
.topnav { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav .icon { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .topnav li:not(:first-child) {display: none;} 
 
    .topnav a.icon { 
 
    float: right; 
 
    display: block; 
 
    } 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .topnav.responsive {position: relative;} 
 
    .topnav.responsive .icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    .topnav.responsive a { 
 
    float: none; 
 
    display: block; 
 
    text-align: left; 
 
    } 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<ul class="topnav" id="myTopnav"> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
    <li><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a></li> 
 
</ul> 
 

 
<div style="padding-left:16px"> 
 
    <h2>Responsive Topnav Example</h2> 
 
    <p>Resize the browser window to see how it works.</p> 
 
</div> 
 

 
</body> 
 
</html>

在代码当屏幕尺寸小于600px的主页选项卡停留，其余的应该是可以通过的汉堡包图标应该在右下角显示但它不起作用。我做错了什么？我应该做些什么才能使其发挥作用？请帮忙

答

主要问题是你在隐藏元素的时候进入小的状态，但是在添加.responsive类时没有显示它们。我已经做了一些更新，为您的位置：

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

你基本上设置在.topnav显示每一个列表项：

https://jsfiddle.net/9xxzsypu/

.topnav.responsive li.item:not(:first-child) { display: block!important; }

答

在你的第一个媒体查询试试这个没有除为第一个。这使汉堡菜单也不可见。

答

虽然其他答案提供使用当前的代码的解决方案，我会建议不少东西了不同的方法......

不引人注目的JS是一个更好的SoC重要的（关注点分离）。使用addEventListener()方法和可选的IIFE将其保留在HTML/global范围之外。
CSS应该采取更多的移动优先方法。
:hover应该几乎总是伴随着:focus。使用tab键从控件跳转到控件，您将看到原因。并不是每个人都在使用鼠标。
HTML或许应该利用HTML5语义
的这是不那么重要，但我仍然会显示“主页”链接。
更新：另外，use the proper heading level（h2为不是顶层）

(function() { 
 
    'use strict'; 
 

 
    var headerEl = document.querySelector('body > header'); 
 
    var btnEl = document.querySelector('.menu-btn'); 
 

 
    if(btnEl && headerEl) { 
 
    btnEl.addEventListener('click', function() { 
 
     headerEl.classList.toggle('open'); 
 
    }); 
 
    } 
 
})();

.page-header { 
 
    background-color: #333; 
 
    color: #f2f2f2; 
 
    overflow: hidden; 
 
} 
 

 
.page-header a { display: block; } 
 

 
.page-header a, 
 
.menu-btn { 
 
    color: inherit; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
    padding: 14px 16px; 
 
} 
 

 
button.menu-btn { 
 
    border: none; 
 
    background: none; 
 
    cursor: pointer; 
 
} 
 

 
.page-header a:hover, 
 
.page-header a:focus, 
 
.menu-btn:hover, 
 
.menu-btn:focus { 
 
    background-color: #ddd; 
 
    color: black; 
 
    outline: none; 
 
} \t 
 

 
.page-header:not(.open) a { display:none; } 
 
.menu-btn { float: right; } 
 

 
@media(min-width: 768px) { 
 
    .page-header.page-header a { display: inline-block; } 
 
    .menu-btn { display: none; } 
 
}

<header class="page-header"> 
 
    <button class="menu-btn">&#9776;</button> 
 
    <nav> 
 
    <a href="#home">Home</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="#about">About</a> 
 
    </nav> 
 
</header> 
 

 
<main> 
 
    <h1>Responsive Topnav Example</h1> 
 
    <p>Resize the browser window to see how it works.</p> 
 
</main>

相关推荐