Grow your CSS skills. Land your dream job.

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

  • # February 22, 2013 at 2:20 pm

    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!

    # February 22, 2013 at 2:24 pm

    What about a standard CSS dropdown menu?

    I guess this is for WP but does that matter?

    # February 22, 2013 at 2:36 pm

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

    # February 22, 2013 at 2:45 pm

    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.

    # February 22, 2013 at 2:54 pm

    @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?

    # February 22, 2013 at 3:03 pm

    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.

    # February 22, 2013 at 4:52 pm

    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 :)

    # February 22, 2013 at 6:12 pm

    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.

    # February 22, 2013 at 6:31 pm

    @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//

       < ?php if (is_page('About')) { echo " class="current""; }?>>

    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!

    # June 28, 2013 at 3:08 am

    @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 :)

    # June 29, 2013 at 6:46 pm

    @PAULIE_D Nevermind :) I figured it out lol

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".