css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

This pattern was inspired from this demo http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/

My addition was using jQuery to add a "more" link in the mobile view so that the parent links could still function

  1. nav

Comments

  1. Nice work! Unfortunately the menu is problematic on mobile devices with wide viewports (e.g., iPad), which get the wide view JS and CSS though they don't support hover. As a result, users can't access any of the sublinks; once they click on a parent link, they're off to another page. I got around the problem by limiting the wide view JS and CSS to devices that don't support touch. In both cases I relied on the "no-touch" class provided by modernizr.

    Javascript

    else if (ww >= 768)
    

    became...

    else if ((ww >= 768) && ($("html").hasClass("no-touch")))
    

    CSS

    I simply prepended the "no-touch" class to all the rules in the wide menu section.

  2. Hey @mbarrish glad you were able to find a good solution for that! I believe I tried to implement the exact same thing when I first wrote it, but testing for touch wasn't very stable at the time.

    Either way, glad you found it useful!

  3. Thanks @micahgodbolt!

    Kind of related: I think the menus would be better on mobile if they maintained their state when a user clicks on a page that's within the same section they're currently in. For example, say I'm on the Loafers page within Shoes > Mens and I click on the Menu toggle to go elsewhere. I think the menu should "remember" my current "location" and show the Shoes > Mens section open. This would save me from having to navigate back to Shoes > Mens if I'm interested in more mens shoes exploration. And if I'm not, it wouldn't add any more steps to my next click.

    Anyway, I tried and failed to revise the script along these lines, so I'm putting it out to you and the CodePen community. Who knows, maybe someone with better JS skills than me will decide to take it up. It would be cool if we kept improving this thing.

  4. @mbarrish often the CMS will handle that for you. We use drupal, and the menu markup is printed with classes denoting the active link. At that point it's pretty easy to set up styles around those classes.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...