1. Paul Scarnegie
  2. Helix Ultimate
  3. Friday, 06 April 2018
How do I get the entire menu title to be clickable when displayed on the mobile menu? The dropdown works correctly on the desktop, but when I look at it on a mobile I have to click on the actual "plus" sign for the menu to open - which is really small.
Attachments (2)
Accepted Answer
Accepted Answer Pending Moderation
I have a really simple solution for this issue on Helix Ultimate.

There is a simple JavaScript function that listens for a click on an element with the "menu-toggler" class. The + icon uses that class. It looks like this.


<span class="menu-toggler"></span>


All you need is to add that same class to your menu item text.

That can be done very easily by adding it to any menu item as the "Link Class".

Yup. It is that simple!!!

Edit:

Ok. It's not that simple. Sorry!

Unlike Helix 3, in Helix Ultimate the "menu-toggle" span is a child element of the menu item link. This causes the JavaScript to be executed twice when the + icon is clicked.

I overlooked this. There are a few ways around this.

I would recommend making changes to the html/mod_menu/ PHP files and the scss/presets.scss and offcanvas.scss files.

In html/mod_menu/ you will want to edit the following files.

  • default_component.php
  • default_heading.php
  • default_separator.php
  • default_url.php


Find the following lines in those files.


if ($item->parent)
{
$linktype .= '<span class="menu-toggler"></span>';
}


Replace it with:


if ($item->parent)
{
if ($item->anchor_css !== 'menu-toggler')
{
$linktype .= '<span class="menu-toggler toggler-icon"></span>';
} else {
$linktype .= '<span class="toggler-icon"></span>';
}
}


In scss/presets.scss replace line 162 and in scss/offcanvas.scss replace lines 117, 134, and 224. They look like this


>.menu-toggler {


Replace the above line with the line below.


>.toggler-icon {


This removes the "menu-toggler" class from the + icons if the menu item has the "menu-toggler" class. You can then add it anywhere.
Attachments (1)
  1. more than a month ago
  2. Helix Ultimate
  3. # Permalink
Responses (9)
Accepted Answer Pending Moderation
Hello Paul, I totally agree with you. Actually the same usability issue like in Helix3. Unfortunately not improved in "Ultimate" yet.

IMHO, the default behavior should be a clickable area on the entire item... at least for ExternalURL, Separator, Heading types. If this is not possible, maybe for all parent items, and the user has to setup the first menu item without any content page.

Currently you would have to apply some custom CSS. Which spreads the clickable SPAN area over the entire item. I have done it for Helix3:

Related topic and my comment
https://www.joomshaper.com/forums/offcanvas-menu-optimizing

Hope this helps.
  1. more than a month ago
  2. Helix Ultimate
  3. # 1
Accepted Answer Pending Moderation
@Daniel
Basically I like your idea to utilize an existing J! core parameter. Which means maximum flexibility. But it can be a drawback with large and deep menus. Not to mention multilingual sites.

IMHO, the separator and heading menuitem should always ommit the href attibute, which is the case in off-canvas menu. Unfortunately not in mega-menu. Those menu types could always be a clickable area in off-canvas menu. (Or they should be covered by the SPAN area with icon).
Maybe the External-URL should behave similar, if it is a parent item.
Apparently only the text-separator gets a special class of "divider". Would make sense to output the other types as well.

Off-canvas Menu in general:
SiteBuilder tend to create parent items that have content. So on first sight, it might make sense to output a clickable title link + a second toggle icon. IMHO, it makes no sense in a mobile menu. It just confuses the visiter, or they might miss some content, or the icon area is simply too small to trigger it. Often people do not foresee those navigation issues. Probably they test on desktop browsers only, or just shrink their browser window to test the off-canvas menu... which is absolutely not comparable to a real mobile device experience.

Not sure which is the best and common solution for Component-menuItems. Maybe your link class is a compromise, where a site-builder has at least a choice!?
  1. more than a month ago
  2. Helix Ultimate
  3. # 2
Accepted Answer Pending Moderation
pepperstreet

I agree with you. Using the little + icon to expand child items in a mobile menu is not intuitive. It is just bad UX.

If you hand people a phone and tell them to browse the site you see them tap the text in the link expecting it to expand. It usually takes people one to two mistakes to figure it out. Now if they are on a slow network that is just about an eternity.

I also like using a down carrot instead of the plus. It seems to better indicate what the user should expect.

When there is a large menu with a significant number of child items in each parent. I usually recommend sliding a second "off-canvas" to display the child items when they are selected. It allows for better use of the screen space. Creating an incredibly tall mobile menu is hard on the user.

At least between us we have supplied two methods for this issue to people who don't have the ability to create something themselves.
  1. more than a month ago
  2. Helix Ultimate
  3. # 3
Accepted Answer Pending Moderation
Totally agree with you. Glad I found at least one person in this solar system! ;)

Sliding Off-Canvas: In the past, I remember there was an attempt to use "mmenu.js", but it has been removed.
For deep menus a nice solution. Also mimics some known mobile app navigation systems. On the other hand, it feels quite difficult for novice users. The direction and back navigation can be challenging.

At least between us we have supplied two methods for this issue to people who don't have the ability to create something themselves.

Yep, although it should be @Joomshaper's job and a basic feature in a framework, which had its 4th re-birth-day.
  1. more than a month ago
  2. Helix Ultimate
  3. # 4
Accepted Answer Pending Moderation
Thanks for the fix, it works. I can click on the Menu heading, and it opens the sub menus.
(Although I imagine if I update Helix Template, the changes will be overwritten?)

Is there a way to make the tree already expanded?
Personally, I only have a few sub menu items in each, and myself and my clients would just find it easier if the whole menu was expanded to start with. Any ideas how to make that happen?

Thanks!
  1. more than a month ago
  2. Helix Ultimate
  3. # 5
Accepted Answer Pending Moderation

Is there a way to make the tree already expanded?


My recommendation would be to use a second menu that is dedicated to mobile. The reason is if your titling method needs the context of the parent it becomes less intuitive. For instance, if you have a parent menu item called Careers and child called Openings, there would be ambiguity as to what would be found on each page.

Creating a duplicate menu is not hard. I would just create a menu called Off-Canvas and then batch copy all the menu items from your main menu. Once you have done that, you can change each to be an alias of the actual menu item.

Then set the menu that is used in the off-canvas menu module to be the Off-Canvas menu you just created.

This is probably the simplest way if you have a small menu to maintain. It also gives you greater freedom to make the mobile menu in a way that will best serve the user.
  1. more than a month ago
  2. Helix Ultimate
  3. # 6
Accepted Answer Pending Moderation
Thanks for the suggestion. I did think of that as well..

Overall I decided against it as it's extra work. Not that I mind it now, but overall it'll be less easy to edit for the client after it launches, and need more client training and then dealing with more questions as to why it's done that way.

Hoping the developers will find a solution to their mobile menu in the future.
  1. more than a month ago
  2. Helix Ultimate
  3. # 7
Accepted Answer Pending Moderation
Is there a way to make the tree already expanded?

Different question and issue. Please, see your separate topic for answer:
Expand Sub Menu Items In Mobile / Off-Canvas Menu From Start
  1. more than a month ago
  2. Helix Ultimate
  3. # 8


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.