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!

Hi Scripto,
Can you share a link to the menu so we can look at it?

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.

I tested on my Iphone and my Windows laptop and it only takes one touch to navigate.

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 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"

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

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