Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Drop-down menu on touch based devices

Drop-down menu on touch based devices

Problem

I have this navigation bar on my website and it doesn't drop down on my iPod Touch, I suspect the same for iPhones and iPads. This is one of the pages

I was wondering if there is any quick fix to enable the touch/hover.

CSS

Problem courtesy of: user1533928

Solution

If you are interested in iDevices, then you can use this trick:

#nav ul {
display: none;
/* Your styles */
}
#nav > li:hover ul {
display: block;
}
/* This is important */
#nav > li > a:hover {
color: #fff; /* You can set the same color or add other style.*/
}

If an element has the :hover event then the first tap iOS renders :hover and the second tap raises the click event.

That should work.

P.S. It's better to make different UI logic for mobile, touch and desktop.

Solution courtesy of: shaa

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Drop-down menu on touch based devices

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×