Hello Pablo!
When developing websites for manufacturing companies, I constantly encounter the following problem, which is the limitations of site navigation with the tools available in WWB.
Due to a number of parameters, I have chosen CSS Mega Menu v1 and v2, Mega Menu as favorites for navigation. They are modern in design, customization options, and so on....
However, there are significant limitations in real projects, namely, it is not possible to assign a link to a main menu item that has sub menu items.
What I would like to have:
1. By clicking on the main menu item, you will be redirected to a page where all product categories are shown, and the user can select the product category that interests him on this page.
2. By selecting a product category in the same menu item (in the sub menu), the user immediately goes to the desired product category.
This is a significant limitation that I encounter every time I develop a website for companies with products in different categories. In 100% of cases, I need to be able to go to the page of all product categories from the main menu, as well as to go to pages with specific product categories.
I will be very glad (and not only, I think) if such an opportunity appears in CSS Mega Menu v1 and v2, Mega Menu, or maybe you will create a new mega menu with such an opportunity.
Navigation problems in the product range
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/links.html
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/links.html
Re: Navigation problems in the product range
A main menu item with sub items cannot be a link, otherwise there is no way to trigger the sub menu on mobile devices.
A 'click' either triggers the link or opens a sub menu, it cannot do both.
There is one exception. The drop down menu where you can use split buttons. In that case, the button is the link and the arrow triggers the sub menu.
A 'click' either triggers the link or opens a sub menu, it cannot do both.
There is one exception. The drop down menu where you can use split buttons. In that case, the button is the link and the arrow triggers the sub menu.
-
BaconFries
-
- Posts: 5726
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Navigation problems in the product range
Previously asked and answered The link in the first-level menu in the Vertical Menu does not work
It isn't really a limitation but how it works and as a developer you should understand this. As you will know there is no mouseover (to highlight item) in "touch" devices such as cell/mobile phones, ipads and tablets. This means that when the user wishes to navigate around the site then they have to tap on the item to open the page and go to it, or when it uses the likes of a submenu that opens the categories below the main item itself.
Now imagine you are using on "touch" that has no mouseover to highlight the item and also uses submenus then they expect to open them on tap and not be taken away to another page, they want to see the submenu and select the items the same principle applies to desktop.
As Pablo has mentioned using "Split Buttons" would allow this by applying the click event to both the main item and the downward arrow now this may not show in "touch" devices due to there is no mouseover to show each of them as separate functions so each would need separate styling (coloring). Yes this could be done with css but will likely add a little more weight to the page but could be done.
As a simple work around you could simply add a extra item to the submenu (the first item) at top call it for example "Full Catalogue" so when selected will go to the page you wish (Full Catalogue) but still allow the user to select all other items in the submenu separately if they wish to do so
Example of split button.
https://www.w3schools.com/howto/howto_c ... _split.asp
See link to bootstrap Reference
https://www.geeksforgeeks.org/bootstrap ... it-button/
It isn't really a limitation but how it works and as a developer you should understand this. As you will know there is no mouseover (to highlight item) in "touch" devices such as cell/mobile phones, ipads and tablets. This means that when the user wishes to navigate around the site then they have to tap on the item to open the page and go to it, or when it uses the likes of a submenu that opens the categories below the main item itself.
Now imagine you are using on "touch" that has no mouseover to highlight the item and also uses submenus then they expect to open them on tap and not be taken away to another page, they want to see the submenu and select the items the same principle applies to desktop.
As Pablo has mentioned using "Split Buttons" would allow this by applying the click event to both the main item and the downward arrow now this may not show in "touch" devices due to there is no mouseover to show each of them as separate functions so each would need separate styling (coloring). Yes this could be done with css but will likely add a little more weight to the page but could be done.
As a simple work around you could simply add a extra item to the submenu (the first item) at top call it for example "Full Catalogue" so when selected will go to the page you wish (Full Catalogue) but still allow the user to select all other items in the submenu separately if they wish to do so
Example of split button.
https://www.w3schools.com/howto/howto_c ... _split.asp
See link to bootstrap Reference
https://www.geeksforgeeks.org/bootstrap ... it-button/
Re: Navigation problems in the product range
Please excuse me for repeatedly asking a question on this topic. Now I understand that I did not fully understand the essence of the restrictions and tried to achieve a solution to the issue. I am a novice website developer and many things are not well stored in my head 
BaconFries' detailed and understandable answer allowed me to figure it out. Thank you for taking the time to provide a detailed answer and for your advice on how to simply solve the problem by adding the appropriate item to the drop-down menu and links to the "Split Buttons" program code (I will definitely try to implement this).
P. S. I'm switching to the "Waiting" mode ahead of the publication of the new WWB 20 teaser. It is especially interesting what will be new in a very important element – the "Layout Grid".
BaconFries' detailed and understandable answer allowed me to figure it out. Thank you for taking the time to provide a detailed answer and for your advice on how to simply solve the problem by adding the appropriate item to the drop-down menu and links to the "Split Buttons" program code (I will definitely try to implement this).
P. S. I'm switching to the "Waiting" mode ahead of the publication of the new WWB 20 teaser. It is especially interesting what will be new in a very important element – the "Layout Grid".