Section header don't work in ipad

[Recon]

Hi,

I have menu where is few drop down menus. First layer of the menu is only section header. This works fine on PC when mouse over the section header, but it doesn't work on ipad... or playStation's browser. This is not actually css problem, because I have attached CMSMS's NCleanBlue's menu and this doesn't work either.

Eny idea?

[Recon]

Just realize that problem is not the section header, its drop down menu. Any ideas how I can get drop down menu working on ipad?

-Recon

[martin42]

Hi

I have same problem! What was the solution?

I see your site's working OK now on iPad.

Thanks

- Martin

[denli]

I got i 2!

This is an ugly problem that should be attended to if cmsms doesn't want to lose the tablet boot!

[martin42]

Well, I guess the real problem is that "CSS:Hover" is fundamentally unsafe (because it doesn't really mean anything) for Touch-screen devices. That's not something that CMSMS can really fix.

Yet for some reason I don't really understand, one of my older sites has CSSMenu drop-downs that work on the iPad. But I think I concluded that old site included some Javascript aimed at old (pre-IE6) browsers, so it's a miracle that the navigation still works at all.

For my most recent site, in the end I just designed the navigation so that Hover drop-downs were not needed. I think this is the safest, cleanest answer. As a compromise, you could maybe have a set-up where you have dummy pages containing a second level of CSSMenu navigation that drops down for the Click event, but also you still allow the CSS:Hover event for those devices that implement it. It would be great if CMSMS could automate all that, somehow!

Hope this helps

- Martin

[peterbus]

Recon,

You say: "it's not the section header" .

I think it is. Only my pages that are marked Sectionheader do not show their submenu's. As soon as I chage it into Content the submenu's work just fine.

So my guess is that there is somthing not ok in the sectionheader "thing".

[denli]

I made a workaround by making instead of a sectionheader an external link to the sites home page. The only downside is if sombody klicks it they wil go to the home page but this is ok for me for now.

[Dr.CSS]

You can customize the menu template so sectionheader have one of these href= statements in it...

1. <a href="javascript:void(0)">Something</a>
2. <a href="#" onclick="return false;">Something</a>

[applejack]

Take a look at Modernizer to detect if touch device then use jQuery events such as touchstart.

[carasmo]

IOS devices don't have hover, they have click so use a click menu or use this code and add your selector where mine is. It works great. All parent links should be section headers or this will prevent getting to the drop down, so all sites I design all parents are section headers of children and the top link is not a link. On desktop it's a hover, on IOS it's a click.

Code: Select all

// iOS Hover Event Class Fix - http://niteodesign.com/web-design/iphone-ipad-ios-and-the-css-hover-event/
// alternate http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".nav li a").click(function(){  // Update class to point at the head of the list
});
}

[carasmo]

as for playstation, then consider rebuilding the menu to be a click menu, just like google's:

http://www.jqueryload.com/jquery-dropdo ... ogle-style