[英]Small problem with hamburger, but I don't see it. Help me to find error please
const mobileNav = document.querySelector(".lista") const burger = document.querySelector(".fa-solid") const funkcja = () => { mobileNav.classList.toggle("active") } burger.addEventListener("click", funkcja) * { padding: 0; margin: 0; box-sizing: border-box; overflow: hidden; } html{ font-size: 10px; font-family: Arial, Helvetica, sans-serif; }.logo { width: 23vh; } /* Nav styling */ nav { display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: rgba(186, 184, 182, 0.694); height: 20vh; position: relative; } ul { display: flex; justify-content: space-around; text-align: center; width: 80%; text-decoration: none; list-style: none; } a { font-size: 2rem; text-decoration: none; }.fa-solid { display: none; }.galeria { display: flex; flex-direction: row; width: 100%; height: 300px; justify-content: space-around; align-items: center; gap: 5px; } img { width: 200px; height: 200px; } @media only screen and (max-width: 1000px){ ul { position: absolute; top: 20vh; right: 0; display: flex; flex-direction: column; height: 200px; background-color: blueviolet; width: 150px; transition: 1s; transform: translate(100%); border-radius: 5px; }.fa-solid { display: block; color: blueviolet; font-size: 70px; } } @media only screen and (max-width: 400px) { ul { width: 100%; } } <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="https.//kit.fontawesome.com/8849951a46.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="style,css"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Hamburgerek</title> </head> <body> <nav class="dupa"> <img class="logo" src="https.//cdn.pixabay.com/photo/2015/11/16/16/41/web-1045994_1280.jpg" alt=""> <ul class="lista"> <li><a href="#">Strona Główna</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Cennik</a></li> <li><a href="#">Kontakt</a></li> </ul> <i class="fa-solid fa-bars"></i> <script src="/Users/mateuszszyca/html/nowy/js.js"></script> </nav> </body> </html>
伙計們，我找不到問題，為什么當我點擊他時漢堡菜單不起作用。 它應該在移動屏幕的正確站點上顯示移動菜單。 當我單擊漢堡包時，沒有任何反應。 有人看到任何解決方案嗎？
我已經為您評論了更改。 您正在向ul提供active class但未在css中定義它。原因是您無法看到導航列表，因為您使用了隱藏在全局選擇器*{overflow:hidden}中的溢出。我希望這能解決您的問題。
const mobileNav = document.querySelector(".lista") const burger = document.querySelector(".fa-solid") burger.addEventListener("click", () => { mobileNav.classList.toggle("active") })
* { padding: 0; margin: 0; box-sizing: border-box; /* overflow:hidden */ /* Removed */ } html { font-size: 10px; font-family: Arial, Helvetica, sans-serif; }.logo { width: 23vh; height: 100%; /* Added */ } /* Nav styling */ nav { display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: rgba(186, 184, 182, 0.694); height: 20vh; position: relative; } ul { display: flex; justify-content: space-around; text-align: center; width: 80%; text-decoration: none; list-style: none; } a { font-size: 2rem; text-decoration: none; }.fa-solid { display: none; }.galeria { display: flex; flex-direction: row; width: 100%; height: 300px; justify-content: space-around; align-items: center; gap: 5px; } @media only screen and (max-width: 1000px) { ul { position: absolute; top: 23vh; /* added */ right: 10px; /* added */ display: flex; visibility: hidden; /* added */ flex-direction: column; height: 200px; background-color: blueviolet; width: 0px; /* for animation */ border-radius: 5px; transition: width 0.25s ease-in-out; overflow: hidden; } ul.active { visibility: visible; /* added */ width: 150px; }.fa-solid { display: block; color: blueviolet; font-size: 4rem; /* changed from px to rem for better responsiveness */ } } @media only screen and (max-width: 400px) { ul { width: 100%; } }
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://kit.fontawesome.com/8849951a46.js" crossorigin="anonymous"></script> </head> <body> <body> <nav class="dupa"> <img class="logo" src="https://cdn.pixabay.com/photo/2015/11/16/16/41/web-1045994_1280.jpg" alt=""> <ul class="lista"> <li><a href="#">Strona Główna</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Cennik</a></li> <li><a href="#">Kontakt</a></li> </ul> <i class="fa-solid fa-bars"></i> <script src="/Users/mateuszszyca/html/nowy/js.js"></script> </nav> </body>
const mobileNav = document.querySelector(".lista") const burger = document.querySelector(".fa-solid") const funkcja = () => { mobileNav.classList.toggle("active") } burger.addEventListener("click", funkcja)
* { padding: 0; margin: 0; box-sizing: border-box; } html{ font-size: 10px; font-family: Arial, Helvetica, sans-serif; }.logo { width: 23vh; } /* Nav styling */ nav { display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: rgba(186, 184, 182, 0.694); height: 20vh; position: relative; } ul { display: flex; justify-content: space-around; text-align: center; width: 80%; text-decoration: none; list-style: none; } a { font-size: 2rem; text-decoration: none; }.fa-solid { display: none; }.galeria { display: flex; flex-direction: row; width: 100%; height: 300px; justify-content: space-around; align-items: center; gap: 5px; } img { width: 200px; height: 200px; } @media only screen and (max-width: 1000px){ ul { position: absolute; top: 20vh; right: 0; display: flex; flex-direction: column; height: 200px; background-color: blueviolet; width: 150px; transition: 1s; border-radius: 5px; }.fa-solid { display: block; color: blueviolet; font-size: 70px; } } @media only screen and (max-width: 400px) { ul { width: 100%; } }
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="https.//kit.fontawesome.com/8849951a46.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="style,css"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Hamburgerek</title> </head> <body> <nav class="dupa"> <img class="logo" src="https.//cdn.pixabay.com/photo/2015/11/16/16/41/web-1045994_1280.jpg" alt=""> <ul class="lista"> <li><a href="#">Strona Główna</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Cennik</a></li> <li><a href="#">Kontakt</a></li> </ul> <i class="fa-solid fa-bars"></i> <script src="/Users/mateuszszyca/html/nowy/js.js"></script> </nav> </body> </html>
語法錯誤：缺少），但我沒有看到。 我的引號似乎也不是問題
[英]Sytax error: Missing ), but I don't see it. My quotation marks don't seem to be the problem either
我已經下載了syncfusion，我不知道如何運行syncfusion演示代碼。 請任何人知道這件事。 發生此錯誤
[英]I have downloaded syncfusion, I don't know how to run syncfusion demo code . Please, anyone, know about it. this error occur
我不想創建另一個數據庫表來過濾誰是團隊誰是朋友，請幫幫我
[英]I don't want to create another db table to filter who is team and who is friend, please help me
我正在制作導航欄，但我沒有發現響應此導航欄的錯誤。 誰能幫我
[英]I am making nav bar but I don't find the error in making responsive to this nav bar. Can anyone help me
我的javascript循環/ while語句代碼不起作用，請幫助我確定我的問題
[英]My javascript loop/ while statement code doesn't work, please help me identify my problem
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.