隱藏響應式菜單

-1

我有一個響應式固定頂部菜單，點擊菜單圖標後會打開。然後，我想在點擊其中一個菜單項後隱藏它。否則它會覆蓋上滑的部分。隱藏響應式菜單

我用的代碼從這個頁面：http://www.w3schools.com/howto/howto_js_topnav.asp

我有什麼改變的代碼隱藏點擊菜單項後的名單？

來源

2016-12-30 Hermano

能否請您發佈您的代碼，以顯示你已經嘗試過的東西。 –

@craig_h見下面 – Hermano

問題編號1不使用w3schools -www.w3fools.com –

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
body {margin:0;} 
 
ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
ul.topnav li {float: left;} 
 

 
ul.topnav li a { 
 
    display: inline-block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
} 
 

 
ul.topnav li a:hover {background-color: #555;} 
 

 
ul.topnav li.icon {display: none;} 
 

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

 
@media screen and (max-width:680px) { 
 
    ul.topnav.responsive {position: relative;} 
 
    ul.topnav.responsive li.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    ul.topnav.responsive li { 
 
    float: none; 
 
    display: inline; 
 
    } 
 
    ul.topnav.responsive li a { 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<ul class="topnav" id="myTopnav"> 
 
    <li><a class="active" 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 class="icon"> 
 
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</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> 
 

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

 
</body> 
 
</html>

來源

2016-12-30 13:08:41 Hermano

這是我用過的代碼。 – Hermano

隱藏響應式菜單

回答

相關問題