Responsive Nav (need help please)

Question

anyone willing to walk me through making a responsive simple burger menu without bootstrap. I want to do it using HTML CSS and a small snippet of jQuery utilising a toggle class method. I'm a noob and having trouble with the markup. I would like the links to be the same height of the nav/header when hovered and also a logo in the header. I will post the HTML markup I have.

https://code.sololearn.com/WHSqjefpFUwW

Answer 1

Here you go..

https://code.sololearn.com/WEKhjJX8566u/?ref=app

Answer 2

You can use transition CSS, but instead of auto height, need to specify the height value.

Try this:

nav ul {
height: 0;
overflow: hidden;
transition: all 2s;
}

nav ul.open {
height: 160px;
}

Answer 3

sweet it worked thank you again !

Answer 4

Hi Calvin thanks for the help, I got it !! :D
one last thing is there a way to get the <ul> to slide down with css when the class is toggled to open?, currently the <ul> just appears because the class sets it to height:auto, I would like it to go from "0" to height:auto like a slide down effect.

https://code.sololearn.com/WHSqjefpFUwW