Help
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
Page 1 of 1
iPad/Phone no Hover? How can I get around this? [Live Example]
#3
Renaissance-Design 
- Available for custom WordPress work
-
- Group: Moderators
- Posts: 3,595
- Joined: 12-August 10
- Reputation: 559
- Gender:Male
- Location:South Wales
- Experience:Web Guru
- Area of Expertise:Designer/Coder
Posted 06 February 2012 - 11:44 AM
#4
onlyhereonce
- Forum Newcomer
-
- Group: Members
- Posts: 52
- Joined: 19-January 12
- Reputation: 0
- Gender:Male
- Location:Stoke on Trent
- Experience:Beginner
- Area of Expertise:Nothing
Posted 06 February 2012 - 01:33 PM
#5
Wickham
- Web Guru
-
- Group: Moderators
- Posts: 2,876
- Joined: 11-June 09
- Reputation: 257
- Gender:Male
- Location:Salisbury UK
- Experience:Intermediate
- Area of Expertise:Web Developer
Posted 06 February 2012 - 01:59 PM
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).
#6
porkchops
- Web Guru
-
- Group: Members
- Posts: 1,073
- Joined: 13-March 11
- Reputation: 228
- Gender:Male
- Location:Belmont, Massachusetts
- Experience:Advanced
- Area of Expertise:Web Designer
Posted 06 February 2012 - 02:25 PM
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.
You should try to use native combobox/pulldowns or think of a better navigation system.
#7
Crispy
- Advanced Member
-
- Group: Members
- Posts: 327
- Joined: 10-July 09
- Reputation: 2
- Gender:Male
- Location:Wrexham, North Wales
- Experience:Nothing
- Area of Expertise:Designer
Posted 08 February 2012 - 12:13 PM
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
Thanks,
Chris
#8
brightonmike
- Web Guru
-
- Group: Members
- Posts: 2,996
- Joined: 27-June 11
- Reputation: 340
- Gender:Male
- Experience:Intermediate
- Area of Expertise:Web Designer
Posted 08 February 2012 - 12:42 PM
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...rdpeople.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...bWur/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.
http://tools.pingdom...rdpeople.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...bWur/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.
This post has been edited by brightonmike: 08 February 2012 - 01:07 PM
Share this topic:
Page 1 of 1