css3 - Mobile and Tablet device for navigation with sub menus css/jquery -
on navigation menu, there sub-menus appear on hover
navigation html this:
<nav> <li> <a href="shop.html">shop</a> <ul> <li><a href="shoes.html">shoes</a></li> <li><a href="shirts.html">shirts</a></li> </ul> </li> <li> <a href="about.html">about</a> <ul> <li><a href="history.html">history</a></li> <li><a href="stories.html">stories</a></li> </ul> </li> </nav>
so on desktop view, :hover pseudo-class works, sub menu appears on mouse on , disappear on mouse out.
but on mobile or tablet devices, of course hover wont work since finger touch functionality. here's happen on devices, on touch, sub menu appear, wont disappear on 2nd touch, disappear if screen touch outside menu
what's best approach on touch functionality? since main navigation links , hover doesn't work on mobile/tablets? maybe 1st touch sub menu appear , double rapid touch redirects link , 2nd touch closes sub menu.
any idea how that? possible use css3 , no js @ all? if not jquery cool me..
thanks :)
check 'multi-level navigation' patterns @ http://bradfrost.github.io/this-is-responsive/patterns.html solve submenu problem
Comments
Post a Comment