對(duì)于我的網(wǎng)頁(yè)（Github Page），我想讓我的菜單適應(yīng)屏幕的大小，這樣當(dāng)它們太小并且元素不適合時(shí)它就會(huì)折疊。我計(jì)劃添加以下解決方案：w3schools，當(dāng)屏幕較小時(shí)使用“burguer”圖標(biāo)來(lái)加入所有元素。我可以使用不同的元素創(chuàng)建菜單，添加“burguer”圖標(biāo)，然后在屏幕很大時(shí)默認(rèn)隱藏它。但是，媒體查詢和js功能一定是錯(cuò)誤的，因?yàn)楫?dāng)我縮小屏幕時(shí)，會(huì)出現(xiàn)“burguer”圖標(biāo)，但其他元素不會(huì)消失，并且單擊“burguer”不會(huì)執(zhí)行任何操作。我猜想某個(gè)地方的名稱有錯(cuò)誤或混淆id?？赡苁菃?？在 w3schools 的示例中使用了div選項(xiàng)卡，但我沒(méi)有。示例的運(yùn)行是必不可少的嗎？/* 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>整個(gè)代碼可以在倉(cāng)庫(kù)（Github Repo）中找到。你能看到我無(wú)法發(fā)現(xiàn)的錯(cuò)誤嗎？為什么 w3school 的例子不適用？我非常感謝你在這里的幫助。預(yù)先非常感謝您！
2 回答
繁華開(kāi)滿天機(jī)
TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超4個(gè)贊
這是一個(gè)基于您的代碼的小型可重現(xiàn)解決方案： https://jsfiddle.net/hneromu4/5/
我添加了一個(gè)固定到鏈接元素的類，當(dāng)我們調(diào)整窗口大小時(shí)，這些元素應(yīng)該保留：
<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>
我還調(diào)整了你的 css 和 js。
慕仙森
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
在你的 CSS 和 HTML 中，我做了一些修改，因?yàn)槟愕臐h堡菜單位于你試圖隱藏的同一個(gè)東西中，這并不是一個(gè)好主意，我還稍微調(diào)整了你的 CSS，因?yàn)槟銓⑽恢迷O(shè)置為相對(duì)位置，但沒(méi)有設(shè)置顯示阻止。希望這可以幫助！
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 關(guān)注
- 227 瀏覽
添加回答
舉報(bào)
0/150
提交
取消