Das HTML-Schaltflächen-Tag versteckt sich hinter einem anderen Schaltflächen-Tag ⇐ CSS

[Anonymous]

Ich erstelle eine einfache Menüfunktion mit einigen Animationen, die gut funktioniert, sich aber hinter einem anderen Schaltflächenelement versteckt. Die Codeblöcke sind unten angegeben.
Hinweis: Diese gesamte Website wurde auf einem Android-Telefon erstellt und nicht auf einem Desktop oder Laptop getestet.

Code: Select all

// OPENING MENU

function MENUOPEN() {
var btn = document.getElementById('MENU');
var openbtn = document.getElementById('MENUOPENED');
openbtn.style = "box-shadow:5px 3px 5px; animation:right ease 2s;"
btn.innerHTML = "CLOSE";
btn.style = "width:27%;";
btn.setAttribute("onclick", "MENUCLOSE();")
}
//CLOSING MENU
function MENUCLOSE() {
var btn = document.getElementById('MENU');
var openbtn = document.getElementById('MENUOPENED');
openbtn.style = "animation:left ease 2s;box-shadow:5px 3px 5px;left:400px;opacity:.0;"
btn.innerHTML = "MENU";
btn.style = "width:27%;";
btn.setAttribute("onclick", "MENUOPEN();")
}

Code: Select all

body {
font-family: 'DynaPuff', cursive;
}

.BTN {
box-shadow: 5px 3px 5px;
border-radius: 20px;
font-size: 26px;
font-family: 'DynaPuff', cursive;
background-color: white;
}

#MENU {
position: fixed;
box-shadow: 5px 3px 5px;
border-radius: 20px;
width: 25%;
font-size: 26px;
font-family: 'DynaPuff', cursive;

}

#CNAME {
box-shadow: 5px 3px 5px;
font-family: 'DynaPuff', cursive;
padding-left: 2px;
border-radius: 20px;
position: fixed;
width: 63%;
left: 32%;
top: 1.5%;
font-size: 26px;
}

#para {
position: absolute;
top: 10%;
left: 2.5%;
width: 95%;

}

@keyframes left {
0% {
opacity: 1;

}

100% {

transform: translatex(-100%);
opacity: 0;

}
}

@keyframes right {
0% {
opacity: 0;

transform: translateX(90%);
}

100% {
opacity: 1;

}
}

```

Code: Select all

MENU



HELLO A paragraph is a self-contained unit of discourse in writing dealing with a particular point or idea. A paragraph consists of three or more sentences. Though not required by the syntax of any language, paragraphs

[url=#para]ABOUT-US[/url]
CONTACT-US

Kann jemand dieses Problem lösen?