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

Improve this question
4
  • upon hover on the desktop version, does it add a class that the menu item such as active or selected?
    – Lodder
    May 14, 2014 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, 2014 at 17:41
  • Any further detail about software used and version of Joomla?
    – MattAllegro
    May 17, 2014 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, 2014 at 16:27

1 Answer 1

Reset to default
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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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