gantry / gantry5

:rocket: Next Generation Template / Theme Framework
http://gantry.org
1.04k stars 204 forks source link

level 2 menu item not opening on hover if in multicolumn level 1 menu #1292

Closed ghost closed 8 years ago

ghost commented 8 years ago

This is easy to reproduce and I tried on serveral templates using latest G5.2.16

E.g Topaz add a new child menu item to "about us" or "coming soon" in "page" menu item(which is multicolumn layout). Look on front end the "parent" indicator correctly shows on the item but the level 2 dropdown does not open. I also tried this on Isotope too - same thing.

2016-05-18_10-39-22 2016-05-18_10-40-07

Forum: http://www.rockettheme.com/forum/joomla-template-isotope/258541-isotope-menu-too-long-drop-down-menus-not-working?start=0#1293013

w00fz commented 8 years ago

It's a multicolumn dropdown, are you clicking on it to expand? It won't work on hover.

// Djamil Legato // From iPhone //

On May 18, 2016, at 02:41, Mark Taylor notifications@github.com wrote:

This is easy to reproduce and I tried on serveral templates using latest G5.2.16

E.g Topaz add a new child menu item to "about us" or "coming soon" in "page" menu item(which is multicolumn layout). Look on front end the "parent" indicator correctly shows on the item but the level 2 dropdown does not open. I also tried this on Isotope too - same thing.

Forum: http://www.rockettheme.com/forum/joomla-template-isotope/258541-isotope-menu-too-long-drop-down-menus-not-working?start=0#1293013

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub

ghost commented 8 years ago

If it's single column then the item opens on hover. If it a multi column then it does not open on hover, but neither does it open on click - that just follows the menu link. I think the behaviours should be consistent anyway.

w00fz commented 8 years ago

This has always been like that. Single dropdown is hover, multi column dropdown is click, always been. If parent is both link and parent (ie, not separator) arrow becomes fat and you click on that to expand children, so that you can click the item to follow link. If parent is separator, arrow is regular and you can click on the whole thing to expand. This is the way menu works in g5 since the very start, new release also adds option to completely ignore hover and just use clicks, as that was a feature request.

If any of this is not behaving as described, then please link so I can see.

// Djamil Legato // From iPhone //

On May 18, 2016, at 09:12, Mark Taylor notifications@github.com wrote:

If it's single column then the item opens on hover. If it a multi column then it does not open on hover, but neither does it open on click - that just follows the menu link. I think the behaviours should be consistent anyway.

— You are receiving this because you were assigned. Reply to this email directly or view it on GitHub

ghost commented 8 years ago

Thanks @w00fz - it does work as you describe and I accept it has "always been that way" too. But to me it's an odd user experience in the real world to have some menus opening on hover and some that you have to click... I still think they should be consistent behaviour. Is there a reason for the difference in behaviour?

w00fz commented 8 years ago

This was a decision made long time ago, it didn't make sense to have a dropdown opening with the same background and styling on top of a fullwidth / multi column dropdown. That's why the multi column dropdown uses a sliding effect instead. You can still get the fly outs effect on single dropdown menus. G5 is all about simplification and cutting options where not needed, the menu has been a major rework from the ground up and we had to make decisions on some logic to keep it simple, mostly failing since no matter how simple we tried to keep it, it's still probably one of the most complicated bits in Gantry. Bottom line is that this approach was discussed and adopted a couple years ago when we were reworking the menu and has been like that since then with no real intention on changing it. The big part of Gantry5 is that it allows for anyone to create their own Menu particle, meaning that this behavior could be reworked if it's desired but I don't think it's something we will support in the core itself.

ghost commented 8 years ago

Thanks for explanation. Unfortunately in Isotope template it get's a little more complex still. Because the menu is shown in an overlay panel, a click closes the overlay panel so you never get to see the submenu. I did however get around this with a little jQuery to remove the click detection on the overlay like this:

jQuery(window).load(function() { jQuery("#g-overlay").unbind(); });

I just added that as an asset on the page settings of the base outline. It seems to work ok.

Thanks for help. :)

williamconifer commented 8 years ago

I have to complain about the "click slide" submenu for menus with multi column submenu items. We are getting complaints from our large website clients about this feature. Our large website clients want a mega menu where they can see sub menu items by hovering or using indented children like in G4. Visitors are complaining that they can't find the menu items they are looking for. THIS IS BAD USER EXPERIENCE.

I've been a customer for almost 10 years and I don't see a future with Gantry 5 without an improvement in this multicolumn menu issue.

w00fz commented 8 years ago

We are not forcing anyone to use the menu we provide with G5. We integrated the menu system so that people had a choice with the most common uses. We can't possibly satisfy everyone's need and we are also not going to. Gantry 5 is completely open source, anyone is free to fork and make it their own or contribute back with any addition that might benefit themselves or others. You are also free to stop using the Menu particle and replace it with any menu module/widget that fits you best, we made sure Gantry 5 is flexible enough for that. Or you could also just modify the Menu particle to behave as you'd like.

I'm sorry if you don't see any future for Gantry 5 and I also emphasize with your frustration. Your words are very harsh on the open source and free software that Gantry 5 is, we've put and continue putting a lot of work into it while giving it out for free.

In the future we might expand the menu functionality to include what you are asking for but for the moment it's not something we are considering.

williamconifer commented 8 years ago

I apologize for my tone. I'm having a bad day with this menu and a client.

As a paid subscriber to RocketTheme, I like G5 a lot and we have a lot of time and effort invested into learning it. I'm glad to know that we can replace the menu particle with some other menu. We may look into paying for our own custom menu particle.

Thank you for efforts. Jack

mahagr commented 8 years ago

It is not hard to modify our menu particle to output different html, but the really hard part is to make the JavaScript and CSS to make the menu work as you expect in all the different devices (including touch in tablets and phones). Having a good menu that works in all the different devices and browsers is something that takes ages to do (in fact that's the reason why there are so many paid megamenu implementations). And Joomla just makes that harder as it allows clickable menu items with children, which is very bad practise as it gets messed up with touch devices (should touch open the menu or load the page?).

If you think of doing a custom megamenu, I advice finding an existing JS project for it and just doing the HTML part.

Bonitto commented 8 years ago

@mahagr where can the assets be found to modify the menu particle? Thanks ^_^

mahagr commented 8 years ago

Its all in menu particle and in main.js file.

Bonitto commented 7 years ago

Sorry to bother again. I guess I am trying to find what is the specific directory because when I go into root > templates > g5_hydrogen >particles, I don't see a menu particle or main.js file that you speak of.

w00fz commented 7 years ago

Menu is a Particle that can be overridden in custom/particles/menu.html.twig. There is also some JS but you might not need to implement your own if you don't need to.

The guide linked below is for creating new particles but it also applies for overriding them, basically you would copy the core menu.html.twig into custom/particles/ and apply your own changes.

http://docs.gantry.org/gantry5/advanced/creating-a-new-particle

Bonitto commented 7 years ago

Gotcha thanks for the prompt response but where exactly is the existing menu particle file located? I get that you're saying to just create a file and add it to my custom folder to override the existing menu particle but since I am doing this for the first time, I'd like to reference the existing menu particle so that I can have an idea of the structure.

w00fz commented 7 years ago

All core particles are located in the nucleus engine folder, here on github you can see them all at https://github.com/gantry/gantry5/blob/develop/engines/common/nucleus/particles .

The menu particle itself is at https://github.com/gantry/gantry5/blob/develop/engines/common/nucleus/particles/menu.html.twig

On your instance it depends which platforms you are using, Wordpress or Joomla.

Bonitto commented 7 years ago

Thank you. You da man

renishguru99 commented 7 years ago

Hi

I have used Gantry 4.1.32 for RocketTheme.

How to create Menu-icon for Click-able and Display for search Box? Check – http://www.screencast.com/t/NFvNuauO3S

See the References - www.tutorialspoint.com/

My site url is - www.guru99.com/

Please help me.

ghost commented 7 years ago

@renishguru99

  1. This issue logger is for Gantry 5 not Gantry 4
  2. This ticket is closed.
  3. Really you should be posting in the RT forums if that is an RT template.
  4. You're asking for a custom development and therefore most likely beyond the forum scope anyway.

Regards, Mark.

orware commented 5 years ago

Hi guys, I know this is an older item here, and it's been closed, but I have the same need as well.

I don't care so much about the need for the submenus to be a flyout (I don't mind the new sliding effect), but under the existing paradigm with Gantry 5, on the Desktop resolution sizes it would be nice to be able to have the option of things being triggered on click or on hover for viewing the submenus.

I had put in a similar request on the forums last year when I first started using the Aurora template, and today I was revisiting the issue and looking to see if there might be a solution for it now, but I mainly came across this GitHub issue page.

Is there a simple/minimal change that I or others could integrate into the main.js file to support the on hover option?

Basically, I think what @marktaylor46 and @williamconifer were desiring is the option to have the hover effect supported (specifically for the Desktop version of the site...I think the current behavior on mobile is just fine).

The responses received by @w00fz are unfortunate (and this was also echoed in some of the responses I received when asking questions like this last year) because I also came from using an older Gantry template which supported the indented menus and supported the on hover option, and those capabilities were lost when moving up to the newer Gantry 5 based template. As a long time customer and person that respects the quality of RocketTheme templates as a whole, it's really disheartening to see feedback like what's been presented here in this issue disregarded so quickly since it negatively impacts the perception of what is otherwise an awesome product/improvement over the previous version of Gantry.

Thank you for listening to my input!