SOLVED Separate submenu items from main menu items
-
-
- V-Web
- Rocketeer
- Posts: 91
- Thanks: 0
-
The default menu particle renders a multi-level menu as follows:
<div class="main-menu"> <ul> <li>Main item 1</li> <ul class="submenu"> <li>Sub item 1</li> <li>Sub item 2</li> </ul> </li> <li>Main item 2</li> <ul class="submenu"> <li>Sub item 3</li> <li>Sub item 4</li> </ul> </li> </ul> </div>
Basically what I need is separting the subitems from the main items, like this:
<div class="main-menu-items"> <ul> <li>Main item 1</li> <li>Main item 2</li> </ul> </div> <!-- Submenu items related to Main item 1 --> <div class="sub-menu-items"> <ul class="submenu"> <li>Sub item 1</li> <li>Sub item 2</li> </ul> </div> <!-- Submenu items related to Main item 2 --> <div class="sub-menu-items"> <ul class="submenu"> <li>Sub item 3</li> <li>Sub item 4</li> </ul> </div>
I'm currenlty altering the way the menu is rendered with a copy of the default menu particle. However, I need some info if this is technically feasible.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
You don't need to create any override to achieve that.
You can just add a sepererate menu and have that start at the "active" menu item level 2. That would be like the old Gantry 4 splitmenu.
Alternately you can just have a separate menu and use that in a second menu particle if you don't want the two menu's related.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- V-Web
- Rocketeer
- Posts: 91
- Thanks: 0
-
Mr T, thanks for the quick reply, appreciate it.
I understand what your saying and I've looked into this solution. However, I want these items to be extracted from the main menu. So the structure of the menu is basically like this:
- Home - Cars - MD - Red - Blue - Grey - L - Yellow - Pink - Orange - XL - Black - Green - Navy - Parts - Contact
In the particle I simply want to select the Main menu as the menu to be extracted from with "Cars" being the starting point. Then I need the underlying items to be split, so:
<!-- First levels --> <ul> <li>MD</li> <li>L</li> <li>XL</li> </ul> <!-- Secondary levels --> <ul> <li>Red</li> <li>Blue</li> <li>Grey</li> </ul> <ul> <li>Yellow</li> <li>Pink</li> <li>Orange</li> </ul> <ul> <li>Black</li> <li>Green</li> <li>Navy</li> </ul>
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Rather than giving me these abstract annotation could you actually do a mock-up of how you want the page to look. The menu particle is just about the most complicated particle we have so I think it's a really bad idea to be overriding it.
Have you looked at "heading" menu types too?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- V-Web
- Rocketeer
- Posts: 91
- Thanks: 0
- I sure can. Please see attached file where I've made it a bit more visual. Basically I need all first level items in a container and all second level items that fall under that particular first level item. I need to place these second level items into "tabs" so they can be displayed in a different part of the particle / page. Clicking on the "MD" item would show its second level items etc etc. The MD, L and XL items are actual pages but we alter the link in the particle in order to activate a tab.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Ok - no matter how hard you try with any override you are not going to be able to achieve that because that's not how the menu particle works. Basically the menu particle displays things hierarchically and only one child at the level at a time. Using multiple menus will require a page refresh to action the change (navigating to a different page) - so that won't give you what you want either.
So I can't think of any automated way of doing that as it will require JS to achieve it too.
So the only options I can give you are:
1. click on CARS and you get a dropdown menu that looks like this:
MD
red
blue
grey
L
green
blue
orange
XL
purple
black
white
The above could be in three columns too - but ALL those options show at the same time.
OR
2. click on CARS and you show a PARTICLE or MODULE in the dropdown that shows the options So you could use a tabs or accordion so you only see the one set of options at a time. so you would see...
MD - L - XL
green
blue
orange
then clicking on the "L" you would see:
MD - L - XL
red
blue
grey
But this WOULD NOT work on the menu items - you would have to manually set up the items within the particle.
3. Look on JED for an alternate menu module capable of this - but I cannot think of any offhand
I've done this type of thing before in web applications I've written in Fabrik - it's known as a cascading dropdown - picking an option determines the next possible options. But I don't know of anything that can do this with Joomla menus.
I think it would be foolhardy to try and create any override to the menu particle to achieve this - it's a massive piece of complex code that touches many areas of the system. You also have to consider how it would work in a mobile device too.
Regards, Mark. -
The following users have thanked you: V-Web
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- V-Web
- Rocketeer
- Posts: 91
- Thanks: 0
-
Thanks! I guess we've found some limits of the system in that case. Considering your comments it would indeed be foolish to pursue a solution as we layed out. We'll take your option into consideration and see if we can get this to work somehow differently.
Thank you for you indepth response and effort in this matter.
-
Time to create page: 0.051 seconds