對于我的網頁（Github Page），我想讓我的菜單適應屏幕的大小，這樣當它們太小并且元素不適合時它就會折疊。我計劃添加以下解決方案：w3schools，當屏幕較小時使用“burguer”圖標來加入所有元素。我可以使用不同的元素創建菜單，添加“burguer”圖標，然后在屏幕很大時默認隱藏它。但是，媒體查詢和js功能一定是錯誤的，因為當我縮小屏幕時，會出現“burguer”圖標，但其他元素不會消失，并且單擊“burguer”不會執行任何操作。我猜想某個地方的名稱有錯誤或混淆id?？赡苁菃?？在 w3schools 的示例中使用了div選項卡，但我沒有。示例的運行是必不可少的嗎？/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */function myFunction() { var x = document.getElementById("nav"); if (x.className === "header_nav") { x.className += " responsive"; } else { x.className = "header_nav"; }}<html><head> <title>Eduardo Alvarado</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <link rel="stylesheet" href="assets/css/main.css" /> <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript> <!-- Load an icon library to show a hamburger menu (bars) on small screens --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body class="is-preload"> <!-- Header Navigation Menu --> <section id="header_nav"> <nav id="nav"> <ul> <li> <a href="index"> <p style="color:white">Home</p> </a> </li> <li> <a href=""> <p style="color:white">Research</p> </a> </li> <li> <a href=""> <p style="color:white">Game-dev</p> </a> </li> <li> <a href="photography"> <p style="color:white">Photography</p> </a> </li> <li><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li> </ul> </nav> </section>整個代碼可以在倉庫（Github Repo）中找到。你能看到我無法發現的錯誤嗎？為什么 w3school 的例子不適用？我非常感謝你在這里的幫助。預先非常感謝您！
2 回答
繁華開滿天機
TA貢獻1816條經驗 獲得超4個贊
這是一個基于您的代碼的小型可重現解決方案： https://jsfiddle.net/hneromu4/5/
我添加了一個固定到鏈接元素的類，當我們調整窗口大小時，這些元素應該保留：
<section id="header_nav">
<nav id="nav">
<ul>
<li class="fixed"><a href="">Home</a></li>
<li><a href="">Research</a></li>
<li><a href="">Game-dev</a></li>
<li><a href="photography">Photography</a></li>
<li class="fixed hamburguer"><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>
</nav>
</section>
我還調整了你的 css 和 js。
慕仙森
TA貢獻1827條經驗 獲得超8個贊
在你的 CSS 和 HTML 中，我做了一些修改，因為你的漢堡菜單位于你試圖隱藏的同一個東西中，這并不是一個好主意，我還稍微調整了你的 CSS，因為你將位置設置為相對位置，但沒有設置顯示阻止。希望這可以幫助！
CSS（第 2525 - 2547 行）：
? ? ? ? @media screen and (max-width: 600px) {
? ? ? ? ? ? ? #nav {display: none;}
? ? ? ? ? ? ? #header_nav a.icon {
? ? ? ? ? ? float: right;
? ? ? ? ? ? display: block;
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
? ? ? ? @media screen and (max-width: 600px) {
? ? ? ? ? #nav.responsive {position: relative;display: block;}
? ? ? ? ? #header_nav.responsive a.icon {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? right: 0;
? ? ? ? ? ? top: 0;
? ? ? ? ? }
? ? ? ? ? #nav.responsive a {
? ? ? ? ? ? float: none;
? ? ? ? ? ? display: block;
? ? ? ? ? ? text-align: left;
? ? ? ? ? }
? ? ? ? }
HTML：
<!-- Header Navigation Menu -->
? ? ? ? ? ? <section id="header_nav">
? ? ? ? ? ? ? ? <a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a><nav id="nav" class="header_nav">
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li><a href="index"><p style="color:white">Home</p></a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li><a href=""><p style="color:white">Research</p></a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li><a href=""><p style="color:white">Game-dev</p></a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li><a href="photography"><p style="color:white">Photography</p></a></li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </nav>
? ? ? ? ? ? </section>
- 2 回答
- 0 關注
- 204 瀏覽
添加回答
舉報
0/150
提交
取消