O'Reilly logo

Web Development Recipes, 2nd Edition by Chris Johnson, Mike Weber, Chris Warren, Brian P. Hogan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Recipe 24Touch-Responsive Drop-Down Menus

Problem

Drop-down navigation is a common element in modern websites, and the pattern for implementing it is well established. On desktop browsers these menus work fine and require only some CSS magic. But as in Recipe 25, Mobile Drag and Drop, a user on a mobile device doesn’t have a mouse and so can’t trigger :hover events, at least not in a consistent way. We need to be aware of this limitation for our mobile users so we can give them the same experience as our desktop users.

Ingredients

  • jQuery

Solution

Our first step is to write the markup for our top menu. We’ll write the markup so that users can navigate our site without the drop-down links. We can do this by making the top-level links point to ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required