1

I am making a Joomla! site with 3 level 1 menus that break down into multiple submenus.
The site works wonderfully on Desktop as the sub-menus appear on hover.

On touch devices though, i am not able to make the dropdowns appear as i cannot simulate the hover event. When i tap on the level 1 items, the browser follows the links instead of opening the dropdown items.

I am looking for a way to make them non-clickable on touch, or maybe 1st tap should open the dropdown and second tap follow the link.

I have tried making the 1st level menus text separators or menu headings, which disables them in desktop too and works ok.
I am ok with that but, in that case i need a way to add content to those paths, so that if someone manually enters the address gets some content.

Any ideas?

Thanks in advance

migrated from stackoverflow.com May 15 '14 at 14:31

This question came from our site for professional and enthusiast programmers.

  • upon hover on the desktop version, does it add a class that the menu item such as active or selected? – Lodder May 14 '14 at 20:48
  • Is this really a Joomla question. It's more about mobile web UX. Anyway IMHO trying to emulate a hover using a short/long press is bad design. – Ashwin Date May 16 '14 at 17:41
  • Any further detail about software used and version of Joomla? – MattAllegro May 17 '14 at 15:16
  • Its 3.something but will come back to you asap on the versions. Is there any way i could leave the menus as text separators (so that they are non-clickable at all) and at the same time control the content that will be published at those urls in case some one enters them manually? (instead of giving a 404 error) – krasatos May 17 '14 at 16:27
1

Ended up making the 3 top level menus normal menus, redirecting to articles etc.
Added a "unlink" class to those 3 top level menu items.

Then added a custom jquery to prevent the links from working: jQuery('.unlink').click(function(e) { e.preventDefault(); }); This way, if someone manually enters the link to the address line there is content there to guide them through and at the same time menus are usable on mobile/touch devices.

Got the code from here: https://stackoverflow.com/questions/970388/jquery-disable-a-link

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.