Jquery Drop-Down menu needed! Can anyone recommend any?

[asiek]

Some might think “Search on Google”, but I’ve already done that.

I’ve found multiple plugins but some are difficult to set up, some are hard to style, ect. Can anyone recommend a simple, easy to style Drop-Down menu, please? Animated or not, I’d appreciate the help!

[Paulie_D]

What about a standard CSS dropdown menu?

I guess this is for WP but does that matter?

[asiek]

@Paulie_D but what about browsers that won’t support the :Pseudo CSS?
&Lol why does the type of site matter? O_o

[Paulie_D]

You don’t need pseudo classes to make a dropdown menu.

http://codepen.io/Paulie-D/pen/29afe4b2f00f534fe238ffec0f855384.

The menu above works without the JS…that’s just styling the active link.

The reason I asked about WP is because I don’t have any experience with it and thought that perhaps it didn’t like pure CSS menus…..I can’t think that would be the case but I just don’t know.

[asiek]

@paulie_D I will try it out! &Oh I see, but no I’ve tried a CSS3 Drop-down before, no issues with WP just hard to style :/ Thank you for your help! May I ask why you suggest CSS instead of JQuery?

[Paulie_D]

I prefer menus that will work whether javascript is enabled or not….people do browse with it turned off you know.

Not many to be sure but they are out there.

JQuery is, without doubt. a useful tool if you have built your menu on it exclusively and javascript isn’t enabled you are denying functionality to your viewer.

I would certainly consider using jQuery to add animations /other effects though.

[asiek]

Thank you for the explanation! I’m excited to try it out!

Just curious about the JS you have inside of that codepen. What does that piece do?

Gonna start coding now :)

[Paulie_D]

When any top menu item is clicked the JS will look to see if it has a class of ‘active’, if it hasn’t it will add that class and remove that class from any other link.

Useful if you want t indicate which top menu item is the current one.

The default text color on the links is lightgrey (except for the currently active one which is green)…when you click on another link you can see it turn green.

Ignore the red hover state.

[asiek]

@paulie_d Understood. My links weren’t working for a short while. I figured out that it was the JS that was interfering. I removed the JS and now the links redirect to the other pages. I’m using a WP function that does the menu highlighting.

EX//

   >

So the JS was of no use in my situation.
The menu is awesome :)
Took a little time to style the sub menu, but worked out perfectly in the end :)
THANKS!

[asiek]

@paulie_d How can I use Jquery to add an animation to my drop down menu?
Do you mind helping me get on the right track?
Or point me to a few tutorials perhaps…
Please :)

[asiek]

@PAULIE_D Nevermind :) I figured it out lol

[Author]

Posts