Submenu Hover Issue on touch screens...

User 2173855 Photo


Registered User
8 posts

Hello,

Can anyone help with this menu issue please?

I’m using SD V5 with Foundation 6.6.3. I have an Accordion/Dropdown menu/submenu combo that toggles @ BP 640px. (see code.jpg).

The Accordion setup (max width 640px) works fine as expected via both touch & mouse pointer but, the Dropdown submenu (because it’s a Hover) requires a double tap on touch screens to select a submenu option. e.g. (1) Tap “Services” to display the submenu (2) Tap a submenu option (3) Tap the same submenu option (again) to display the page. (see menu-issue.jpg).


1) Does anyone know how to fix this please? I see there are various suggestions e.g. https://www.w3.org/TR/mediaqueries-4/#d … edia-hover , but none appear to be full proof.

2) Also, what is the easiest way (whilst still using Foundation) to change the “Services” submenu to be a “click” (for both touch & mouse) rather than “Hover” for the wider screens please?


Thanks in advance, fingers crossed!
Attachments:
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Hi Scripto,
Can you share a link to the menu so we can look at it?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2173855 Photo


Registered User
8 posts

Cheers Eric

Here goes ... https://script7.co.uk/jbcc/index.html

N.B. These are trimmed down pages and all submenu opts link to the sitemap page, but it demonstrates the issue just the same.

User 187934 Photo


Senior Advisor
20,181 posts
Online Now

I tested on my Iphone and my Windows laptop and it only takes one touch to navigate.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2173855 Photo


Registered User
8 posts

Thanks for taking the time to check this Eric, really appreciate your help. With your feedback & my further testing, the issue appears to only affect a limited number of iOS devices (albeit across various iOS releases, inc the latest).
User 2699991 Photo


Registered User
4,782 posts
Online Now

Scripto wrote:
Thanks for taking the time to check this Eric, really appreciate your help. With your feedback & my further testing, the issue appears to only affect a limited number of iOS devices (albeit across various iOS releases, inc the latest).


To remove the hover on the "services' link at all breakpoints (so the user has to tap or click

select the submenu,
go to - Elements down to attributes and delete all except "Data Drop-down" add the value = true You can add a transition effect if you desire

now select the menu item 'services' (The trigger)
make sure that you enter #no-link in the href box, move back to the Elements tab
delete the attribute 'Data Toggle' make a note of the value first then
add an attribute = data open value = sub-menu2 (or it was named)

there you have it a drop-down submenu that appears when the trigger is clicked at all breakpoints
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

Wayan Jaya wrote:
Scripto wrote:
Thanks for taking the time to check this Eric, really appreciate your help. With your feedback & my further testing, the issue appears to only affect a limited number of iOS devices (albeit across various iOS releases, inc the latest).


To remove the hover on the "services' link at all breakpoints (so the user has to tap or click

select the submenu,
go to - Elements down to attributes and delete all except "Data Drop-down" add the value = true You can add a transition effect if you desire

now select the menu item 'services' (The trigger)
make sure that you enter #no-link in the href box, move back to the Elements tab
delete the attribute 'Data Toggle' make a note of the value first then
add an attribute = data open value = sub-menu2 (or it was named)

there you have it a drop-down submenu that appears when the trigger is clicked at all breakpoints
Well I'll Be Blowed

I forgot to mention the addition of a text link inside the submenu, needed to close the submenu when clicked..
Well it was 1"00 in the morning :P HeHe that is my excuse and I am sticking to it.

I shall be putting a quick step by step up on my tutorials page let me know if anyone is interested & I will send the link
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2173855 Photo


Registered User
8 posts

Wayan Jaya wrote:
Wayan Jaya wrote:
Scripto wrote:
Thanks for taking the time to check this Eric, really appreciate your help. With your feedback & my further testing, the issue appears to only affect a limited number of iOS devices (albeit across various iOS releases, inc the latest).


To remove the hover on the "services' link at all breakpoints (so the user has to tap or click

select the submenu,
go to - Elements down to attributes and delete all except "Data Drop-down" add the value = true You can add a transition effect if you desire

now select the menu item 'services' (The trigger)
make sure that you enter #no-link in the href box, move back to the Elements tab
delete the attribute 'Data Toggle' make a note of the value first then
add an attribute = data open value = sub-menu2 (or it was named)

there you have it a drop-down submenu that appears when the trigger is clicked at all breakpoints
Well I'll Be Blowed

I forgot to mention the addition of a text link inside the submenu, needed to close the submenu when clicked..
Well it was 1"00 in the morning :P HeHe that is my excuse and I am sticking to it.

I shall be putting a quick step by step up on my tutorials page let me know if anyone is interested & I will send the link


Thanks Wayan.

Eh up ... it's a good while since I've heard the phrase "I'll be blowed" :lol:

Would appreciate a link to the step by step tutorial please.
User 2699991 Photo


Registered User
4,782 posts
Online Now

Scripto wrote:
Wayan Jaya wrote:
Wayan Jaya wrote:
Scripto wrote:
Thanks for taking the time to check this Eric, really appreciate your help. With your feedback & my further testing, the issue appears to only affect a limited number of iOS devices (albeit across various iOS releases, inc the latest).


To remove the hover on the "services' link at all breakpoints (so the user has to tap or click

select the submenu,
go to - Elements down to attributes and delete all except "Data Drop-down" add the value = true You can add a transition effect if you desire

now select the menu item 'services' (The trigger)
make sure that you enter #no-link in the href box, move back to the Elements tab
delete the attribute 'Data Toggle' make a note of the value first then
add an attribute = data open value = sub-menu2 (or it was named)

there you have it a drop-down submenu that appears when the trigger is clicked at all breakpoints
Well I'll Be Blowed

I forgot to mention the addition of a text link inside the submenu, needed to close the submenu when clicked..
Well it was 1"00 in the morning :P HeHe that is my excuse and I am sticking to it.

I shall be putting a quick step by step up on my tutorials page let me know if anyone is interested & I will send the link


Thanks Wayan.

Eh up ... it's a good while since I've heard the phrase "I'll be blowed" :lol:

Would appreciate a link to the step by step tutorial please.


its been a bit of a funny day

volcano blowing its top again, and our electric off,, it just come back,, i will put it up and let you know

Sithi
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2173855 Photo


Registered User
8 posts

The step by step tutorial you compiled was perfect thanks Wayan. A great way to learn as I firstly repeated the steps in a new SD project and then used what I'd learnt to update my project.

Thanks for taking the time to help. All sorted :)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.