BirdNET-stream/www/assets/styles/menu.css

150 lines
2.5 KiB
CSS
Raw Normal View History

2022-08-15 11:42:28 +02:00
nav {
2022-08-16 07:05:49 +02:00
--nav-width: 20em;
--nav-bg: white;
--burger-size: 2em;
2022-08-15 11:42:28 +02:00
position: fixed;
top: 0;
left: 0;
2022-08-16 07:05:49 +02:00
width: 0;
2022-08-16 05:21:53 +02:00
z-index: 10;
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.toggler {
z-index: 21;
height: var(--burger-size);
width: var(--burger-size);
align-items: center;
justify-content: center;
padding: 0.6rem;
position: fixed;
2022-08-15 11:42:28 +02:00
cursor: pointer;
opacity: 0;
}
2022-08-16 07:05:49 +02:00
.hamburger {
position: fixed;
2022-08-15 11:42:28 +02:00
top: 0;
left: 0;
2022-08-16 07:05:49 +02:00
height: var(--burger-size);
width: var(--burger-size);
padding: 0.6rem;
2022-08-15 11:42:28 +02:00
display: flex;
align-items: center;
justify-content: center;
2022-08-16 07:05:49 +02:00
z-index: 20;
opacity: 1;
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.hamburger>div {
2022-08-15 11:42:28 +02:00
position: relative;
top: 0;
left: 0;
background: black;
height: 2px;
width: 75%;
2022-08-16 07:05:49 +02:00
transition: all 0.4s ease;
2022-08-15 11:42:28 +02:00
color: #000;
}
2022-08-16 07:05:49 +02:00
.hamburger>div::before,
.hamburger>div::after {
2022-08-15 11:42:28 +02:00
content: '';
position: absolute;
top: -7px;
background: black;
width: 100%;
height: 2px;
2022-08-16 07:05:49 +02:00
transition: all 0.4s ease;
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.hamburger>div::after {
2022-08-15 11:42:28 +02:00
top: 7px;
}
2022-08-16 07:05:49 +02:00
.toggler:checked+.hamburger>div {
background: rgba(0, 0, 0, 0);
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.toggler:checked+.hamburger>div::before {
2022-08-15 11:42:28 +02:00
top: 0;
transform: rotate(45deg);
background: black;
}
2022-08-16 07:05:49 +02:00
.toggler:checked+.hamburger>div::after {
2022-08-15 11:42:28 +02:00
top: 0;
transform: rotate(135deg);
background: black;
}
2022-08-16 07:05:49 +02:00
.menu {
2022-08-15 11:42:28 +02:00
height: 100vh;
width: 0;
visibility: hidden;
}
2022-08-16 07:05:49 +02:00
.toggler:checked~.menu {
2022-08-15 11:42:28 +02:00
width: fit-content;
height: fit-content;
2022-08-16 07:05:49 +02:00
background-color: rgba(255, 255, 255, 1) !important;
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.menu>ul {
2022-08-15 11:42:28 +02:00
display: flex;
flex-direction: column;
position: fixed;
width: 0;
height: 100vmax;
padding-left: 1em;
padding-right: 1em;
2022-08-16 07:05:49 +02:00
margin-top: var(--burger-size);
2022-08-15 11:42:28 +02:00
visibility: hidden;
background-color: white;
2022-08-16 07:05:49 +02:00
z-index: 10;
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.menu>ul>li {
2022-08-15 11:42:28 +02:00
list-style: none;
padding: 0.5rem;
}
2022-08-16 07:05:49 +02:00
.menu>ul>li>a {
2022-08-15 11:42:28 +02:00
color: black;
text-decoration: none;
font-size: 2rem;
}
2022-08-16 07:05:49 +02:00
.toggler~.fill {
display: none;
}
.toggler:checked~.fill {
2022-08-15 11:42:28 +02:00
background: white;
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: var(--nav-width);
2022-08-16 07:05:49 +02:00
display: block;
z-index: 10;
2022-08-15 11:42:28 +02:00
}
2022-08-16 07:05:49 +02:00
.toggler:checked~.menu>ul {
2022-08-15 11:42:28 +02:00
width: 20em;
transition: fit-content .5s ease;
opacity: 1;
transition: opacity .5s, visibility .5s, height .5s, width .5s;
visibility: visible;
}
2022-08-16 07:05:49 +02:00
.toggler:checked~.menu>ul>li>a:hover {
2022-08-15 11:42:28 +02:00
color: orange;
2022-08-16 07:05:49 +02:00
}
@media screen and (max-width: 700px) {
nav {
--burger-size: 4em;
}
2022-08-15 11:42:28 +02:00
}