Shape 5

General Category => Pre-Sales Questions => : slashslash February 01, 2013, 02:03:12 AM



: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: slashslash February 01, 2013, 02:03:12 AM
My original question was unclear, so I edited it...
I mean not only mobile devs but all devices with touchscreen...


original question:

Maybe dumb question:
How can I show submenus on a phone/pad/touch-device? It always navigates on touching....??

In Desktop view, I got a Flex-Menu which drops-down submenus on hover.
--> Hover --> flyout submenu
--> Click --> navigate
==> expected behavior


On mobile I would like to change the behavior of "touching" a menu to "flyout"
--> Touch --> flyout submenu
---> Submenu ---> Touch ---> navigate

I am currently testing on an Android phone with Opera and Chrome.
Both navigate directly on touch - with no possibility to show the submenus

I would like only the last items (leaves) in the menu to navigate

Like:
--> Menu -> display submenus on touch
------------> submenu1 -> navigate on touch
------------> submenu 2-> navigate on touch

Can this be done?
Thank you
Reinhard


: Re: Flex Menu: how to "flyout" submenu on mobile / pad?
: mikek February 01, 2013, 08:22:24 AM
Hello,

I am not sure what you mean. The mobile version does not use the flex menu if you have responsive enabled. If you don't have responsive enabled or you're using a non-responsive template there's not a way to change the functionality on just a mobile device.


: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: slashslash February 06, 2013, 02:26:28 AM
I mean all devices with touchscreen - I edited my original question.

On a touchscreen - there is no Hover...  (?) - so is there a way to have any Menu-Item
DROP-Down on touch IF it is not the last (leave) in the hierarchie?
NAVIGATE if last in hierarchie

The same Menu-Item - IF on a non-touch, hover-able device - it should behave like normal:
DROP on Hover - NAVIGATE on Click

This is not related to FlexMenu, or S5 but I assume this is a problem on any touch-enabled device..
How is this handled best?


: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: mikek February 06, 2013, 08:26:51 AM
Hello,

I still don't understand your question about navigating on touch. Touching will only open the menu item that you clicked and no others. We will be releasing an update to Vertex soon that allows for an onclick method on the flex menu for tablets.


: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: slashslash February 07, 2013, 02:08:00 AM
Maybe your update will adress exactly that...

On a touch-device, if you touch a menu-item - it will navigate, like if you clicked it with a mouse!! - it will NOT behave like a HOVER with the mouse ----> so it NEVER SHOWS SUBMENUS

On a screen with mouse - if you hover it will show submenus --- > and only navigate if you Click it!

So: On a Touch - Device, a menu item (if touched) should only navigate if it is a leave. Otherwise it should REVEAL its children....

I hope this is clearer...

Thank you!


: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: mikek February 07, 2013, 08:21:03 AM
Hello,

Yes, that's exactly what the onclick method will be doing. It will be out in about 2 weeks or so as a patch to Vertex.


: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: shecmt February 21, 2013, 05:21:06 PM
Hi, I noticed that the Vertex 3.1 Patch is listed now in the downloads section of the site. Is this the update that adds the "onclick" functionality? I'm currently running Vertex 3.0 on my Joomla 3.0 site, and I've already modified lots of stuff in the Bootstrap folder that I would be replacing if I install the 3.1 patch. Is there a section of code or a single file in the 3.1 patch that I can replace to get the "onclick" functionality without starting over on some of the files?


: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: mikenicoll February 21, 2013, 11:28:24 PM
Hello,

The newest version of vertex provides this functionality. You would need to apply the patch as per the instructions on our Tutorials page.

-Mike


: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: shecmt February 26, 2013, 01:45:51 PM
I upgraded from Vertex 3.0 to Vertex 3.1 on my Joomla 3.0 site (I'm using the Cleanout Template). With the "ONCLICK FOR TABLETS" turned on and the template set to "FLUID", the S5 Flex Menu does not reveal the dropdown items when touched on a 10" tablet. It acts as a "click" rather than as a "mouseover" that reveals the dropdown. How can I make it act as a "mouseover" when you touch the 1st level items, thereby revealing the dropdown with the children items?


: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: mikek February 26, 2013, 02:55:31 PM
Hello,

It is supposed to act as a click, that's what onclick does. There is no such thing as onmouseover for touch screen devices. The onclick method will open all the subs the same way, just with a different trigger.


: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: alfoto March 11, 2013, 10:36:40 AM
I have upgraded to Vertex 2.3.0 in my Joomla 2.5.7 site using Corporate response template and enabled "onclick for tables" but the menu still doesn't works correctly.
By touching the menu in a tablet the list of submenus appear but I have no option to select any of them as the menu just closes before, the only item that works are the menu options at first level.
In vertical mode the mobile menu works fine but in horizontal mode the only available menu is the standard and it doesn't stays until I select the desired option.
I have checked other templates and the one that seems to work correctly is New Vision.


: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: mikek March 11, 2013, 11:08:43 AM
Hello,

You would need to have active club membership in order to receive support on paid products. The new menu functions have been fully tested with our responsive templates, including Corporate Response, and work exactly as described above using the core files. There is no difference between the menus on different templates, they all use the exact same files and functions.

If your menu is closing after opening it then either the update didn't complete properly to vertex 2.3 or you have the old files cached in your browser. There is nothing in the code that will allow the menu to close automatically once onclick is triggered.


: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: alfoto March 11, 2013, 01:36:48 PM
Have checked 3 times that all files have been uploaded, made all changes in the PDF.

If I enable onclick the submenu options are not visible in the tablet ( Nexus 7 + Chrome), if I disable onclick the submenu options are visible but I can't select them because the menu doesn't remain open.



: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: mikek March 11, 2013, 02:41:54 PM
Hello,

Again, you would need to have a paid membership in order to assist with this.

BTW the Nexus 7 would most likely be showing the mobile menu, not the flex menu that this discussion is referring to. No changes have been made to the mobile menu, that has always worked with onclick.


: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: alfoto March 11, 2013, 03:38:47 PM
The mobile menu is shown in vertical orientation in a Nexus but in horizontal orientation the normal S5 menu is shown and this menu doesn't works correctly with the onclick setting.

If set only the first ( main) item of the menu is shown and no submenus are available, if not set the menu shows but too fast and then it's not possible to select any option.



: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: mikek March 11, 2013, 04:45:14 PM
Hello,

We no reports of this happening from any other member, and we've fully tested this and we are not able to reproduce these results. As I stated before, there is no way for the menu to disappear automatically once onclick is triggered. It will remain open until the user clicks it again or clicks another menu, the code will not allow it to close any other way. If it closing automatically that means the mouseover script is still loading either because those files are still present on your site or you have them cached on your machine; that script has a timed delay to hide the menu, the onclick method does not trigger this method. Again, I cannot provide support on a paid product if you do not have an active paid membership.


: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: alfoto March 12, 2013, 02:15:31 AM
Ok, I have paid now  for getting support for a free vertex update. Now please help me to make the menu work correctly mobile.

As I said when opening the web in a tablet in portrait mode the responsive menu appears and works as it should, if I rotate the tablet the responsive menu disappears in Chrome ( not in Opera) and the normal S5 menu appears.

Now If I set the onclick option, only the first option of each menu is available, if I touch the option the link works but no other submenu option appears.

If I don't set the onclick option the submenus appear but I can't click on them because it closes before.

I have disabled any chache and make sure the last changes are active, actually changing the onclick option immediatelly disables or enables showing the submenus as I commented.

Btw, the corporate template doesn't looks well in Opera mobile, the menu is extended to 2 rowsand the responsive menu is over the logo.



: Re: Flex Menu: how to "flyout" submenu on mobile / pad? (TOUCHSCREEN)
: mikek March 12, 2013, 07:30:59 AM
Please open a new topic in the forum board pertaining to the template that you are using and a moderator will assist you from there. This board is only for pre-sales questions. Please also provide a link to your site in the new topic.