Hey guys,

 

Having a bit of a problem and wondering if anyone can help/shed some light on how I can fix this.

 

I've built a site, it's ready to go live: http://www.akordpeople.co.uk but the drop downs i.e Development link don't work on the iPad or iPhone. Seems to be because there's no hover on the phone/pad?

 

Any ideas how I can fix or get around this? (Easily)

 

Thanks,

Chris

no touch screens will have hover. How will they know your finger is hovering?

Here's an idea.

This lol

If you code a style for the :focus state you should be able to use tab browsing on a mobile (ie like people who can't use a mouse use tabbed browsing).

As others have said... there is no hover action on touchscreen devices.

 

You should try to use native combobox/pulldowns or think of a better navigation system.

Banging my head againast the wall with this one, tried listeners and all sorts. Is there a quick way to edit the drop down to be a "click to stay open"? Maybe that would fix it? Really don't want to have to re build the entire thing.

 

Thanks,

Chris

A bit of a side note, but if you intend this to be mobile-friendly you need to seriously adjust your loading speeds.

 

http://tools.pingdom.com/fpt/#!/sQUh9a0pF/http://www.akordpeople.co.uk/

 

"Your website is slower than 87% of all tested websites"

 

That's no good for mobiles, especially over 3G connections.

 

This is how you do it!

 

http://tools.pingdom.com/fpt/#!/xkLqbWur/kaexec.com

 

Half the http requests, half the size.

 

 

 

For your menu, a possible workaround is that you have two menus, your normal desktop menu, and a select dropdown.

 

Using media queries you make each menu visible or not visible depending on the device the user is browsing on.

 

With a select dropdown, you can use javascript which makes other dropdowns (your child menus) appear when a certain option is selected on the first dropdown.

 

Example: http://jsfiddle.net/UdP4H/2/

 

Resize your screen so the normal menu disappears. Then select "Other" from the dropdown for an example of a submenu.

 

 

Problem solved.

Edited February 8, 201214 yr by brightonmike