- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi everyone
I want to add transition to the drop down menu at my website
i added transition to the main menu items but when trying to add transition to the drop down menu, it does not work
i want to add transition: all 0.3s ease-in-out 0s;
any help
i am not css expert, i will copy and paste the code
thanks
your dropdown now works in this way
status normal: .submenu { left: -999em }
(this means hidden outsite the viewport)
status hover: .submenu { left:auto }
(this means 0px or /default position/ from his relative container)
you should change this logic, in order to have:
status normal/closed:
.submenu {
left: 0; /*always in the right place*/
max-height: 0px;
overflow: hidden; /* to have hidden content */
border-top: none; /* you don't want to show the border when closed */
transition: max-height 1s; /*or change with your value */
}
status hover/open
.submenu {
max-height: 1000px; /* */
border-top: 2px solid #000;
}
This will makes your dropdown sliding from top.
Keep in mind the transition speed is related to the time needed to go from 0px to 1000px, also if the computed height is only 200px. So choose the right values for both transition speed and max-height