When I want to click the icon on a phone to open the menu I want there to be a transition. This is the code for responsive devices:
@media screen and (min-width: 800px) {
nav {
height: 80px;
flex-direction: row;
}
.logo {
padding-left: 50px;
margin: 0;
width: 20%;
}
ul {
display: flex;
justify-content: flex-end;
width: 80%;
flex-direction: row;
}
ul li {
display: inline-block;
margin: 0 70px 0 0;
text-align: left;
border-bottom-style: none;
padding: 0;
}
span.nav-toggle {
display: none;
}
}
I was expecting nothing because I did not know how to do that. I tried many things but I don't know why it didn't work.
Hi in your CSS ist a little mistake, you cant give a transition
to disply propperties. display: none/block, flex
etc. are instand. If you want to build a Navi with transition
you should use the height
, thats the simplest way.
.navNormal{
width: 15rem;
height: 0;
}
.navTransition{
height: 10rem;
line-height: 4rem;
transition:height 0.3s ease-in-out;
transition-delay: 0.1s;
}
To trigger the animation you can use a Checkbox
if you want to use CSS only.
Otherwise you can use the onClick/onclick
Attibute, an addEventListener
(JS without Framework) or command classList.toggle(navTransition)