Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by benfarnham
benfarnham
17,073 Points

How can I create a dropdown menu that uses hover events while still being mobile/touch friendly?

I have been avoiding dropdown menu's like the plague until I now really have a need for one. I know how to use CSS's pseudo :hover selector to toggle the "nested-menu"s display property or even to animate it in. I really need to make this menu friendly across all devices and browsers especially when it comes to touch devices. I have tried adding some small jQuery to toggle a class on and off but that solution doesn't work for iOs devices and a few others (I can't remember).

I know there are plugins for this but, call me a purist, I want to understand how to do this for myself. I have been going through JavaScript and jQuery courses which have been awesome but I still don't feel I have the know how to tackle this beast. Here is where I am so far.

I want to create a horizontal menu using the following HTML code for structure:

<ul id="menu"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li id="hidden-menu"><a href="#" id="sub-menu-toggle">Link 3</a> <ul id="nested-menu"> <li><a href="#">Sub-Link 1</a></li> <li><a href="#">Sub-Link 2</a></li> <li><a href="#">Sub-Link 3</a></li> </ul> </li> <li><a href="#">Link 4</a></li> </ul>

The CSS I have is similar to this:

menu {

display: block; width: 80%; margin: 0 auto; }

menu > li {

display: block; width: 25%; height: 56px; line-height: 56px; text-align: center; list-style: none; }

nested-menu {

display: none; }

nested-menu > li {

height: 56px; line-height: 56px; }

hidden-menu:hover > #nested-menu {

display: block; }

I tried to use jQuery's effects like .fadeIn(), .toggle(), and even .toggleClass() to add in some touch friendly features. Where would I begin to start building a responsive, touch friendly drop-down menu. This code is a rough sketch of what I did so go easy, but any pointers as to where I can learn to create a hover effect and click effect bound to the same element that is cross browser friendly would be extremely appreciated.

2 Answers

Daniel Newman
Daniel Newman
Courses Plus Student 10,715 Points

Try this article to get in touch with ideas you need. There is CSS solution, but it works on iOS6 and grater.

benfarnham
benfarnham
17,073 Points

That is awesome and honestly sheds a lot of light on what is needed. Thank you so much!

Danelle Bailey
Danelle Bailey
3,403 Points
Danelle Bailey
Danelle Bailey
3,403 Points

Trying looking up examples using :active pseudo element.

benfarnham
benfarnham
17,073 Points

So I honestly am avoiding using a hashtag as the href value so in order to prevent reloading the page I would need to use the (event).preventDefault(); jQuery value to stop from refreshing. If I am misunderstanding the :active pseudo element, how could I target the active element if the click event never triggers an active state? (I don't like hashtags in my url from my anchor tags).