I’m ready to create my first drop down menu, and have heard that hover doesn’t work on many mobiles devices. So what does everyone do; what’s best? I’ve seen several drop downs referenced here on SitePoint… Should it be done with just CSS no JavaScript (Timo’s). Or will the Simple Drop Down (www.pmob.uk) work better?
The key (in my view, at least) is to make sure that the top level links click through to the main sections of the site where there are, say, sidebar inks to the sub pages. If you can only access some pages via a dropdown that only appears on hover, some of your pages will be inaccessible to touch devices. (Even if there weren’t touch devices, it’s still important to make top level links clickable, as it’s not good practice to make any content only accessible via JS or even CSS.)
This is one area with the notion of responsive design falls flat on it’s face considering all mobile applications tend to implement a nested menu structure as separate views. That is the way a large hierarchical menu should generally be handled – following known UX patterns. The concept of a drop down just doesn’t translate well to to mobile based on screen area and interaction with the device.
Thank you. I appreciate the information.