stackoom
  简体   繁体   中英

Small problem with hamburger, but I don't see it. Help me to find error please

 原文  2022-09-10 15:16:55  5   2    javascript/ html/ css

Question

 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>

Guys I can't find problem, why hamburger menu doesn't work when I click him. It should show mobile menu on the right site of mobile screen. When I click hamburger nothing happens. Anyone see any solution?

2 answers

solution1
 1  2022-09-10 16:07:20

I have commented the changes for you. you are giving active class to the ul but not defining it in the css .the reason you couldn't see you nav list because you were using overflow hidden in global selector *{overflow:hidden} .i hope this solves your issue. 

 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>

solution2
 -1  2022-09-10 15:52:07

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Sytax error: Missing ), but I don't see it. My quotation marks don't seem to be the problem either AngularJS small test, help me find the error please 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 Why don't work my function xmlParser(). Help me please I am making nav bar but I don't find the error in making responsive to this nav bar. Can anyone help me I've an error but I don't find the problem Can somebody help me? Can't find problem in React JSON Syntax Error… I don't see it My javascript loop/ while statement code doesn't work, please help me identify my problem
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM