Grow your CSS skills. Land your dream job.

jQuery Mobile Navigation – Need Some Help

  • # February 17, 2013 at 6:17 pm

    I would like the child pages (in white) to be hidden until the parent pages (in green) are clicked, and then only those child pages would be shown.

    Here is what I have so far, but something isn’t working right:
    http://codepen.io/anon/pen/FtrKI

    Here is the thread where I created a similar nav, using the same code:
    http://css-tricks.com/forums/discussion/20608/mobile-navigation-dropdown#Item_17

    Any ideas?

    Thanks guys! I’ve been banging my head over this one for a bit. I’m far from a jQuery expert.

    # February 18, 2013 at 2:31 am

    If you click the gear on the JS tab you can include jQuery, then review your selectors:

    $(‘.sixteen columns responsive-footer mobile-show ul.menu > li > a’)

    Means all a that are direct childs of li, direct childs of ul.menu, descendants of mobile-show, descendants of responsive-footer, descendants of columns, descendants of .sixteen. This is not what you want since the `sixteen columns responsive-footer mobile-show` are classes on the same element. Use something like:

    $(‘.responsive-footer ul.menu > li > a’)

    If you remove unnecessary classes from the html I can help you more, they are kinda slapping me in the face when trying to figure them out :P

    # February 18, 2013 at 10:49 pm

    Gross. I didn’t realize how much junk I left in that code. Here is a much cleaner version of the same code:
    http://codepen.io/anon/pen/FtrKI

    Thanks for the help @CrocoDillon. I’m going to attempt what you said now, but I wanted to get the updated Pen posted ASAP.

    # February 19, 2013 at 4:49 am

    Remove the `display: none;` from `.sub-menu li` and hide the submenus using jQuery instead. That way if a user doesn’t have javascript enabled the whole menu is still accessable.

    $(function() {
    // hides all submenus
    $(‘.sub-menu’).hide();

    var current = null;

    $(‘.menu > li > a’).click(function(e) {
    if (current)
    current.slideUp();

    current = $(this).next(‘.sub-menu’);
    current.stop().slideDown();

    e.preventDefault();
    });
    });

    # March 9, 2013 at 7:36 pm

    @CrocoDillon – Works like a charm! Thank you!

    Working Pen here:

    http://codepen.io/JeremyMG/pen/vsCpI

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

You must be logged in to reply to this topic.

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