Dropdown Css: How Do I Implement Toggle Vs Hover

Problem i'm running into is a bunch of customers complaining that my site is not touch friendly, specifically with drop down menus. The root cause is related to the use of :Hover in CSS, since this acts as a double click for touchscreens. I found a lot of snippits on the net that utilize bootstrap and jscript Toggle Ui. in place of :Hover in CSS.

I'm wondering if anyone else has modified their cart to support touchscreen functionality, and if so what code did you modify to make this work?

I'm using TWIGMO for mobile devices, so i'm good there. This is to support touchscreen desktop customers.

CSSPlay.co.uk is a great reference for non-jscript menus that are touchscreen friendly. I adapted one of the menus there for my previous cart but I haven't got that far with my CS Cart implementation yet.

Hi, I had a similar problem. I found a solution by adding the following script to my “Information” block.

To find information block, go to (CS Cart 3.0.6) “Design” → “Layouts” in admin panel. Select “Default” tab. The “Information” block is right at the bottom. Go to “Block Options” for this block, and in “Content” tab, add following script (have to add in HTML source, click on “Edit HTML Source” button").



This script basically disables the link for all top level menu items. So, on touchscreen device, when you click on top level menu item, it will open dropdown menu, and stay there. No more redirection. You loose redirection to top level menu items from drop down menu,but I don't use them anyway. See my sites:




On a touch screen device, if you click on any menu item, it opens the drop down menu, and stays there.