Grow your CSS skills. Land your dream job.

Tackling Mobile Sub Menus

  • # December 14, 2012 at 1:59 pm

    Hi all,

    I have been working on a project for a little bit now, and I’ve come to a fork in the road, and need some guidance.

    The navigation menu for my project has a sub menu for two tabs, and a second sub menu for one of those tabs.

    Up until recently, I’ve been committed to just giving the the sub menu the ol’ `display: none` for my convenience, but I realize this isn’t the best approach, as I’m limiting the experience for mobile users.

    I’m curious to how other people approach this, my thought is there’s probably some jquery out there to disable anchor tags, then change the pseudo-class from :hover to :focus on smaller screens to display the sub menu.

    Does anybody have experience with this?

    # December 14, 2012 at 2:40 pm

    You know that you could set the hover and focus properties to the same don’t you?

    In fact it’s recommended.

    # December 14, 2012 at 3:01 pm

    Yes, I am aware..I guess my question is..is this the best approach?

    What alternatives have you used with success? If I disable the anchor tag of the parent link, it makes the page inaccessible to the mobile user. Do I have to choose which is more important for a mobile user..is there a way to have my cake and eat it too?

    # December 14, 2012 at 3:09 pm

    JQuery mobile events might be of use: http://ben-major.co.uk/2012/05/jquery-mobile-events-finally-launched/

    # December 14, 2012 at 3:20 pm

    @Paulie_D, I appreciate the link! This looks like it’s exactly what I need! I may even redesign the entire mobile menu now..haha

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".