ProxmoxAAS-Dashboard/css/nav.css
Arthur Lu 3a79b8f5c8 add transition to hamburger menu
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
2023-05-03 22:08:00 +00:00

77 lines
1.2 KiB
CSS

nav {
overflow: hidden;
color: white;
background-color: black;
font-size: larger;
}
nav a, nav h1, nav label {
text-align: left;
padding: 14px 16px;
text-decoration: none;
}
#hamnav label, #hamburger {
display: none;
}
@media screen and (min-width: 600px){
#hamitems a:hover, #hamitems a[aria-current="true"], #hamitems:hover a[aria-current="true"]:hover {
background-color: white;
color: black;
}
#hamitems:hover a[aria-current="true"] {
background-color: black;
color: white;
}
nav {
display: flex;
align-items: center;
}
#hamitems {
display: flex;
}
}
@media screen and (max-width: 600px){
nav {
display: grid;
grid-template-columns: 1fr auto;
}
#hamitems {
display: block;
position: absolute;
top: 55px;
right: 0;
background-color: black;
}
#hamitems a {
box-sizing: border-box;
display: block;
text-align: center;
width: 100%;
}
#hamnav label {
display: inline-block;
}
#hamburger ~ #hamitems a {
height: 0;
padding: 0 0.5em;
border: 0;
transition: height 250ms cubic-bezier(0.23, 1, 0.32, 1);
}
#hamburger:checked ~ #hamitems a {
height: 2.5em;
padding: 0.5em;
border: 1px solid #333;
transition: height 250ms cubic-bezier(0.23, 1, 0.32, 1);
}
}