I have some jquery script in my html to make my navbar responsive, but it's not... responding. I click on the icon and it does nothing. Anyone have any idea where I'm being stupid with this?
> <!DOCTYPE html>
> <html lang="en">
> <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">
> <link rel="stylesheet" href="logohome.css">
> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
> <title>logo</title>
> </head>
> <body>
> <nav>
> <div class="logo">
> <a href="#"><img src="logo.svg" alt="Gjallahar logo"></a>
> </div>
> <div class="toggle">
> <a href="#"><ion-icon name="menu-outline"></ion-icon></a>
> </div>
> <div>
> <ul class="menu">
> <li><a href="#">HOME</a></li>
> <li><a href="#">WORLD</a></li>
> <li><a href="#">FACTIONS</a></li>
> <li><a href="#">POLITICS</a></li>
> <li><a href="#">MAGIC</a></li>
> </ul>
> </div>
> </nav>
>
> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js">
>
> $(function(){
> $(".toggle").on("click", function(){
> if($(".menu").hasClass("active")){
> $(".menu").removeClass("active");
> $(this).find(a).html("<ion-icon name='menu-outline'></ion-icon>");
> else {
> $(".menu").addClass("active");
> $(this).find(a).html("<ion-icon name='close-outline'></ion-icon>");
> }
> });
> });
>
>
> </script>
> </body>
> </html>
> ```
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a, a:hover{
text-decoration: none;
}
.head{
height: 1rem;
background-color: black;
}
.logo img{
width:80px;
margin-right: 10px;
}
nav{
background-color: crimson;
/*add background*/
padding: 5px 20px;
display: flex;
align-items: center;
}
.logo{
flex: 1;
}
.menu{
display: flex;
align-items: center;
list-style: none;
}
.menu li{
padding: 15px 10px;
font-size: 16px;
}
.toggle{
display: none;
}
@media screen and (max-width: 600px) {
nav{
display: block;
position: relative;
padding: 1rem 1.5rem;
}
.menu{
margin-top: 1rem;
display: none;
}
}
.menu.active, .toggle{
display: block;
}
.toggle{
position: absolute;
top:15px;
right: 20px;
}
I tried everything I know but I know nothing about JS. I expected the menu to drop down after I clicked it, but no.
I have implemented something using JavaScript without JQuery which may help to identify where your code has an error. I replaced your ionicon with ...
Click it!
const toggle = document.querySelectorAll('.toggle'); const menu = document.querySelectorAll('.menu'); toggle[0].addEventListener('click', function(event){ if(menu[0].classList.contains('active')){ menu[0].classList.remove('active'); return; } else { menu[0].classList.add('active'); } });
.menu { display: none; }.active { display: block; }
<div class="logo"> <a href="#"><img src="logo.svg" alt="Gjallahar logo"></a> </div> <div class="toggle"> <a href="#">...</a> </div> <div> <ul class="menu"> <li><a href="#">HOME</a></li> <li><a href="#">WORLD</a></li> <li><a href="#">FACTIONS</a></li> <li><a href="#">POLITICS</a></li> <li><a href="#">MAGIC</a></li> </ul> </div>
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.