When in mobile view, the navigation turns into a menu button. When menu button is clicked, the links appear but it’s so instant. I want to add animation of the links appearing as if they’re sliding down or fading in or any style. I tried using duration in toggleClass even tried transition in CSS but doesn’t seem to work. Can anyone figure out with only the code I wrote? Thanks in advance.
You can’t use a transition between display: none / display: block
I’d recommend adding a transition to .header-list and setting a max-height. Set to 0 for closed and 300px for open (or whatever value works for ya)
Ok, I got the basic idea.
I removed the display: none from the header-list and added a max-height of 0. Also added a transition. Gave a max-height to open class. It works, at least the animation. But another problem arises is that, the menu, by default is shown on the right. When the menu button is clicked, the main menu opens and the default menu disappears. how to go around that problem? Do I write the code here? or edit it in Codepen for you to check?
Hey, I got it finally. Thanks a lot 