Mein Menü in JS schließt sich, wenn es nicht soll
Posted: 14 Feb 2025, 07:18
Ich habe versucht, ein Menü zu erstellen, das schließt, wenn Sie an einen anderen Ort klicken. Wenn ich jedoch versuche, auf etwas im Menü zu klicken, schließt es auch das Menü, das ich nicht möchte. Unten werde ich meine HTML, JS und CSS zur Verfügung stellen. Das Hauptproblem ist nicht der Kreis, der nicht dazu führt, dass das Menü verschwindet, sondern die Tags, auf die einst geklickt hat, lässt das Menü verschwinden. < /P>
Code: Select all
Title
Menu
[url=#]Home[/url]
[url=#] About us[/url]
[url=#]Volumes[/url]
[url=#][h4]Submissions[/h4][/url]
VOLUME 1
Logo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet tincidunt metus, vitae accumsan odio ultrices et. Nunc sed purus enim.
< /code>
JS: < /p>
const button = document.getElementById('circleButton');
const circle = document.getElementById('circle');
const mainContent = document.getElementById('mainContent');
button.addEventListener('click', () => {
if (circle.classList.contains('hidden')) {
circle.classList.remove('hidden');
requestAnimationFrame(() => {
requestAnimationFrame(() => {
circle.classList.add('show');
mainContent.classList.add('blur');
});
});
} else {
circle.classList.remove('show');
mainContent.classList.remove('blur');
setTimeout(() => {
circle.classList.add('hidden');
}, 300);
}
});
document.addEventListener('click', (e) => {
if (
e.target !== button &&
!circle.contains(e.target) &&
!circle.classList.contains('hidden')
) {
circle.classList.remove('show');
mainContent.classList.remove('blur');
setTimeout(() => {
circle.classList.add('hidden');
}, 300);
}
});
----------
< /code>
CSS: < /p>
#circleButton {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
background-color: transparent;
color: peachpuff;
border: 1px solid peachpuff;
cursor: pointer;
z-index: 10;
font-family: "Newsreader", serif;
font-style: italic;
}
.menu{
z-index:50;
}
.circle {
position: fixed;
top: 50%;
right: -5%;
transform: translate(-50%, -50%) scale(0);
width: 60vmin;
height: 60vmin;
background-color: beige;
border-radius: 50%;
opacity: 0;
transition: all 0.3s ease-out;
pointer-events: none;
display: flex;
z-index:51;
justify-content: center;
align-items: center;
}
.circle-inner {
position: absolute;
width: 100%;
height: 100%;
transition: all 0.3s ease;
pointer-events: none;
}
.circle-inner h1,
.circle-inner h2,
.circle-inner h3,
.circle-inner h4 {
font-size: 4.25em;
transform-origin: center;
z-index:52;
font-family: "Newsreader", serif;
font-weight: 500;
position: absolute;
left: -150%;
transform: perspective(300px) rotate(5deg) rotateY(2deg) translateY(-50%);
transition: all 0.3s ease;
color:white;
}
.circle-inner a{
text-decoration: none;
color: inherit;
}
.circle-inner h1:hover,
.circle-inner h2:hover,
.circle-inner h3:hover,
.circle-inner h4:hover{
text-decoration: underline;
}
.circle-inner h1 {
top: -10%;
transform: perspective(300px) rotate(6deg) rotateY(20deg) rotateZ(10deg) translateY(-50%);
}
.circle-inner h2 {
top: 25%;
transform: perspective(300px) rotate(2.5deg) rotateY(15deg) rotateZ(5deg) translateY(-50%);
}
.circle-inner h3 {
top: 55%;
transform: perspective(300px) rotate(-2.5deg) rotateY(15deg) rotateZ(-5deg) translateY(-50%);
}
.circle-inner h4 {
top: 75%;
transform: perspective(300px) rotate(-3deg) rotateY(22deg) rotateZ(-10deg) translateY(-50%);
}
.hidden {
display: none;
}
.show {
display: block;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
}
#mainContent {
transition: filter 0.3s ease-out;
margin:0;
padding:0;
}
#mainContent.blur {
filter: blur(6px);
}