11.10.2021, 08:46
Hallo Admin,
vielen Dank für Deine Antwort! In Codepen kopieren, keine Ahnung wie das geht, sorry!
Hier kommt noch der CSS-Code:
#full-screen-menu-toggle {
z-index: 200;
position: fixed;
padding: 0.25em 0.5em;
top:1em;
right:1em;
background: rgba(0,6,22, 0.75);
color: #FFFFFF;
font-weight: 400;
}
.full-screen-menu-active #full-screen-menu-toggle {
background:red;
}
.site-nav {
transition: all 0.4s ease;
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 6, 22, 0.85);
z-index:100;
width: 320px;
height: 333px;
}
.full-screen-menu-active .site-nav {
opacity: 1;
pointer-events: initial;
}
.site-nav ul {
display: block;
transition: all 0.3s ease;
padding: 0;
list-style-type: none!important;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
margin: 0px!important;
padding: 0px!important;
color: #FFFFFF;
font-weight: 400!important;
}
.site-nav ul li {
list-style-type: none;
margin-bottom: 0.5em;
line-height: 1.25em;
letter-spacing: 0.1em;
}
.site-nav ul li:hover {
background-color: rgba(255,255,255, .125);
}
.site-nav a {
color:white;
text-decoration: none;
display: block;
padding:.5em;
}
.full-screen-menu-active .site-nav ul {
transform: translate(-50%, -50%) scale(0.9)
}
/*############*/
Viel mehr Code gibt es nicht, weil ich das Menü erstmal auf eine leeren HTML-Seite teste...
VG
none
vielen Dank für Deine Antwort! In Codepen kopieren, keine Ahnung wie das geht, sorry!
Hier kommt noch der CSS-Code:
#full-screen-menu-toggle {
z-index: 200;
position: fixed;
padding: 0.25em 0.5em;
top:1em;
right:1em;
background: rgba(0,6,22, 0.75);
color: #FFFFFF;
font-weight: 400;
}
.full-screen-menu-active #full-screen-menu-toggle {
background:red;
}
.site-nav {
transition: all 0.4s ease;
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 6, 22, 0.85);
z-index:100;
width: 320px;
height: 333px;
}
.full-screen-menu-active .site-nav {
opacity: 1;
pointer-events: initial;
}
.site-nav ul {
display: block;
transition: all 0.3s ease;
padding: 0;
list-style-type: none!important;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%) scale(1.3);
margin: 0px!important;
padding: 0px!important;
color: #FFFFFF;
font-weight: 400!important;
}
.site-nav ul li {
list-style-type: none;
margin-bottom: 0.5em;
line-height: 1.25em;
letter-spacing: 0.1em;
}
.site-nav ul li:hover {
background-color: rgba(255,255,255, .125);
}
.site-nav a {
color:white;
text-decoration: none;
display: block;
padding:.5em;
}
.full-screen-menu-active .site-nav ul {
transform: translate(-50%, -50%) scale(0.9)
}
/*############*/
Viel mehr Code gibt es nicht, weil ich das Menü erstmal auf eine leeren HTML-Seite teste...
VG
none