navbar animation

This commit is contained in:
realaravinth 2021-08-23 18:55:57 +05:30
parent a8c3eaa617
commit b1fd56e9b6
No known key found for this signature in database
GPG key ID: AD9F0F08E855ED88

View file

@ -16,16 +16,12 @@
*/
@import '../../vars';
$hamburger-menu-animation: 0.3s ease-in;
.secondary-menu {
display: block;
}
.secondary-menu__list {
// position: sticky;
height: 0px;
overflow: hidden;
}
.nav__hamburger-menu {
display: inline-block;
width: 50px;
@ -63,17 +59,48 @@
}
.nav-toggle:not(:checked) ~ .secondary-menu__list {
height: 0px;
// overflow-y: hidden;
// max-height: 100%;
overflow-y: hidden;
max-height: 0;
transition: max-height $hamburger-menu-animation;
}
.nav-toggle:checked ~ .secondary-menu__list {
height: 100%;
max-height: 500px;
overflow-y: auto;
transition: max-height $hamburger-menu-animation;
}
.secondary-menu__brand-name:hover {
color: $light-text;
cursor: pointer;
}
.nav-toggle:checked ~ .secondary-menu__heading {
.nav__hamburger-menu {
span:nth-child(2) {
border: none;
}
span:nth-child(3) {
transform: rotate(-45deg) translate(55%, -15%);
transition: $hamburger-menu-animation;
}
span:first-child {
transform: rotate(45deg) translate(35%, 40%);
transition: $hamburger-menu-animation;
}
}
}
.nav-toggle:not(checked) ~ .secondary-menu__heading {
.nav__hamburger-menu {
span:nth-child(3) {
transition: $hamburger-menu-animation;
}
span:first-child {
transition: $hamburger-menu-animation;
}
}
}