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

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -