Responsive Menu Issues!

[KKHAN]

Hi,

I am creating a responsive menu, this is the first time i am attempting this after following a few tutorials i understand the basics and Ive tried to implement it on my own.

Although i have 2 issues.

JsFiddle

1. CSS: When you resize it to a mobile view. The Menu changes, below the mobile-menu div their is some EXTRA white height i want to get rid of before the content section, but i am having trouble doing this.

2. How can i now animate this menu. So that when they click the mobile-menu div, the height of the nav/ul expands and when you click it, it toggle it off and hides again.

[mmcgu1966]

I’m a little confused by the color-links at the top, are they supposed to be the mobile-nav links? Why not use some jQuery to add a ‘show’ class to the nav manu when you click on the MENU link, re-hiding it after clicking on a manu option.
for animation, you could use a css transition (transition: max-height .3s;) on the UL’s max-height (either on hover, active, or with that additional class name).
If youre using jQuery, you could also simply use the jQuery slideDown() and slideUp() controls instead of css.

[KKHAN]

No they are social media links, if u remove max-height from the UL it will display the menu.

[Author]

Posts