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

CSS Mega Menu - weird behaviour on touch screen PCs

CSS Mega Menu - weird behaviour on touch screen PCs

Problem

I have a Menu on this site that is behaving normally on chrome on a standard Windows 8.1 PC but has odd issues when viewed on chrome on a Windows 8.1 laptop with a touchscreen.

The submenu items aren't clickable and when you lose focus there is a weird ghosting of the text. Not seen this before and not quite sure what is causing it.. I am using Foundation 4, the site is built on Orchard.

http://www.barossa.sa.gov.au.web7.tempdomain.com.au/

Any advice would be appreciated!

Problem courtesy of: beebul

Solution

To replicate the issue open Google Chrome developer tools and enable "Emulate touch screen".

Now click on a top level menu item (eg. Council) and hover outside the menu. We can see the menu background sub-menu headings are visible. Hover back over 'Council' and you'll see the last level of menu items become visible.

The reason why this is happening is becuase when you click on 'Council' it's adding the CSS class 'hover' to the its li element. Within that li there is a ul with the class 'dropdown'. A CSS rule is executing which sets this to visible if the class 'hover' is applied to the parent li.

Looking at the foundation documentation http://foundation.zurb.com/docs/v/4.3.2/components/top-bar.html the same functionality is occuring here. THE DIFFERENCE is that when clicking outside the menu the 'hover' class is removed from elements in the menu. This is not happening with your solution.

Could be related to..

  • https://github.com/zurb/foundation/issues/2505
  • https://github.com/zurb/foundation/issues/2945

I would recommend you update Foundation CSS and JavaScript to the latest version (4.3.2).

Otherwise you could create some dirty jQuery to monitor when you click outside the menu and remove the .hover class from all elements within the menu.

Hope that helps.

Solution courtesy of: Andrew

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

CSS Mega Menu - weird behaviour on touch screen PCs

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×