滑出導航不工作

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的主頁選項卡停留，其餘的應該是可以通過的漢堡包圖標應該在右下角顯示但它不起作用。我做錯了什麼？我應該做些什麼才能使其發揮作用？請幫忙

來源

2017-07-18 Deeven

主要問題是你在隱藏元素的時候進入小的狀態，但是在添加.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; }

來源

2017-07-18 20:01:28 Sean

在你的第一個媒體查詢試試這個沒有除爲第一個。這使漢堡菜單也不可見。

來源

2017-07-18 20:12:23

雖然其他答案提供使用當前的代碼的解決方案，我會建議不少東西了不同的方法......

不引人注目的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>

來源

2017-07-18 21:13:31 BDawg

滑出導航不工作

回答

相關問題