on Clicking the list items when the toggleBtn is active, then active class is removed from toggleBtn and menu class, I am not able to understand the reason for this behaviour, I have tried stopPropogation in js file, but its not working, I have also tried pointer-events in css file, but its of no use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="menu">
<div class="toggleBtn">
<ion-icon name="close-outline"></ion-icon>
</div>
<li style="--x:0">
<a href=""> <ion-icon name="settings-outline"></ion-icon></a>
</li>
<li style="--x:1">
<a href=""> <ion-icon name="mail-outline"></ion-icon></a>
</li>
<li style="--x:2">
<a href=""><ion-icon name="videocam-outline"></ion-icon></a>
</li>
<li style="--x:3">
<a href=""><ion-icon name="build-outline"></ion-icon></a>
</li>
<li style="--x:4">
<a href="">
<ion-icon name="game-controller-outline"></ion-icon>
</a>
</li>
<li style="--x:5"><a href="">
<ion-icon name="camera-outline"></ion-icon>
</a></li>
<li style="--x:6">
<a href=""><ion-icon name="home-outline"></ion-icon></a>
</li>
<li style="--x:7">
<a href=""><ion-icon name="person-outline"></ion-icon></a>
</li>
</ul>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script src="script.js"></script>
</body>
</html>
==================
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #222327;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.menu{
position: relative;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.menu .toggleBtn{
position: absolute;
width: 55px;
height: 55px;
color: #0f0;
border: 2px solid #0f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 3em;
transition: 0.5s;
}
.menu .toggleBtn.active{
transform: rotate(315deg);
background: #0f0;
color: #222327;
}
.menu li{
position: absolute;
left: 10px;
list-style: none;
transform-origin: 140px;
border: 2px solid #0f0;
border-radius: 50%;
transform: rotate(calc(360deg / 8 * var(--x))) translateX(40px);
z-index: 10;
pointer-events: none;
scale: 0;
transition: 0.5s;
transition-delay: calc(0.1s * var(--x))
}
.menu.active li{
scale: 1;
pointer-events: initials;
}
.menu li a{
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
font-size: 1.75em;
color: #0f0;
transition: 0.5s;
transform: rotate(calc(360deg / -8 * var(--x)));
}
.menu li.active a{
background: #0f0;
color: #222327;
}
=============
let menuToggle = document.querySelector('.toggleBtn');
let menu = document.querySelector('.menu');
let list = document.querySelectorAll('li');
menuToggle.onclick = () => {
menu.classList.toggle('active');
menuToggle.classList.toggle('active');
}
list.forEach(item => item.addEventListener('click',
function () {
list.forEach(i => i.classList.remove('active'));
this.classList.add('active');
}))
I want that on clicking the list items, it should not toggle the toggleBtn and menu