How to fix Hover on menu for ipad/ipod touch

[stoberj]

I will be the first to say I enjoy using CMSMadesimple but far from an expert.  I have been asked by an administrator at our school who now has an ipad why our menus on our schools webpage do not work.  Our website is kalida.k12.oh.us - and are using the CSS-horizontal menus and think they work good for us.  What I would like to do - is when they click on a section header that it shows all the menus under it - without changing the hovering that currently works good now.  I did set up the first section header to be a content page and then lists all the content under it - but that is a pain and not as friendly for updates to our pages.

Like I said - I can follow directions but not very smart when it comes to coding - so any help would be greatly appreciated.

[Deak]

From a usability point of view, I would not recommend doing what you describe. Instead, your top-level menu items, when clicked, should take you to a landing page with sub-navigation.

[martin42]

Hi,

What was the solution to making CSS Menus drop down successfully on the iPad?

Thanks!

- Martin

[martin42]

OK - the problem was that the CSS "Hover" method isn't really supported on touch-based devices (iPad, iPhone, iPod Touch, Android?).

Strangely it just worked OK with my old CSSMenu based site, but that's really old.

The workaround is to ensure that all your drop-down menus have landing pages...

So for example, if your menu has an item (say "Accommodation") with two sub-items (say "Hotels" and "Camping"), then in addition to having pages for Hotels and Camping, you also need a page for Accommodation.

Maybe there's a more elegant solution though. I believe it's possible to use Javascript to check for touch-based devices and catch the 'click' event instead, but apparently that's deprecated (i.e. not guaranteed to work).

- Martin

[Dr.CSS]

It sounds like it needs an a link to function, you could make the sectionheader an internal link to first child page as a work around...

Make sectionheader, add children, go back and turn sectionheader into internal like to first child page...

[martin42]

Thanks! That's a good idea. So the sectionheader doubles as the first sub-item - avoiding the need to add an unnecessary page.