The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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:

    Here is the thread where I created a similar nav, using the same code:

    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

    This reply has been reported for inappropriate content.

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

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

    Means all a that are direct childs of li, direct childs of, 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 > 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

    This reply has been reported for inappropriate content.

    Gross. I didn’t realize how much junk I left in that code. Here is a much cleaner version of the same code:

    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

    This reply has been reported for inappropriate content.

    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

    var current = null;

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

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


    # March 9, 2013 at 7:36 pm

    This reply has been reported for inappropriate content.

    @CrocoDillon – Works like a charm! Thank you!

    Working Pen here:

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed