Public Forums 71,145 posts

[piva Friend pivaJoin date: February 2014Posts: 6Downloads:0Uploads:0 Thanks: 4]

#194630

I’m trying to replicate a Protostar multilevel horizontal split menu using a single-row multi-column Megamenu.

The problem I have is that I can’t assign stacked position to the submenus to avoid that the ones of the left-sided items in a menu hide the right-sided items of the same level.
Moreover, I would like keep displayed the levels higher that the current one for orientation purposes.

Any hints?

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#521950

do you need anything like the attached image ? If not provide us a screenshot how do you need the menu

---

Attachments:

1. 

[piva Friend pivaJoin date: February 2014Posts: 6Downloads:0Uploads:0 Thanks: 4]

#521956

The submenus in the image are ok, but I would like to have them left justified and permanent like in the first example.

And as far as the trigger, I would prefer the “hover” instead of the “click”.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#522463

This is really a tough call and this come under customization. There is no provision like this in the template.

But, I have made some changes to the code and bought a similar solution. so Please check this and confirm.

http://www.numismaticcollection.com/coins.html

If this is what you want I will provide you the steps what i changed in the code.

1 user says Thank You to chavan for this useful post

1. piva

[piva Friend pivaJoin date: February 2014Posts: 6Downloads:0Uploads:0 Thanks: 4]

#522465

Great job Chavan,
Exactly what i need, thank you!

Please let know the steps to follow to reach such result, in order to start understanding how to customize the template.

(p.s.: it seems that Chome behaves in a different way compared to IE, Firefox and Opera)

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#522557

This looks like it’s not really submenus under the main menu, instead a menus module that is loaded according to the page you are on, giving the impression that it is actually a submenu, but it’s a separate module.

So, for example, when you are on home, the 2nd and 3rd menus are not shown. When you are on the Roads page, the Norway / USA menu module shows, but only on that page. Then when you are on the USA page, the USA / Norway menu module is shown, as is the Route 66 / Red Rock menu.

Seems that for a small site, this would be ok, but it could get a bit unwieldy with a large site as to which pages to show certain menu modules on, especially if this information changes often.

In the case of the Coin example, it looks like it was all done with the megamenu with multiple levels of nesting, but I also see separate modules for the actual sub menus that are showing on the page nav-pills class at the ul level. I’m not sure what the submenus are doing in the example here, as when you hover them using something like Firebug, the submenus of the megamenu are not what’s highlighted as you hover the code, instead the separate modules in the code are what highlights the sub menus.

Just an outside observation on this. Of course, Chavan could explain the coins example better.

One way or the other, hope this helps in some way.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[ebrt Friend ebrtJoin date: February 2014Posts: 3Downloads:0Uploads:0]

#522586

It’s exactly what I’m looking for…
I’m waiting for Chavan answer…
Thanks

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#522649

These are the changes done on your site

1. I have made the submenus from the Megamenu invisible

2. Then i have added a Position Mainnav below Megamenu position using php code

3. Then I have Added a menu Module to that postition mainnav (Already there was some Modules added for the menus).

[ebrt Friend ebrtJoin date: February 2014Posts: 3Downloads:0Uploads:0]

#522652

OK can you explain in detail with an example. As a tutorial. Please.
Thanks

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#522768

I think this would be a good brief.

1. I have added this css to /templates/t3_bs3_blank/css/themes/dark/megamenu.css

.t3-navbar .nav-child {
display: none !important;}

2. Go to this file /templates/t3_bs3_blank/tpls/blocks/mainnav.php

Find this code
<jdoc:include type=”<?php echo $this->getParam(‘navigation_type’, ‘megamenu’) ?>” name=”<?php echo $this->getParam(‘mm_type’, ‘mainmenu’) ?>” />

Add the below code after the above

<jdoc:include type=”modules” name=”mainnav” style=”raw” />

3. Then I have Added a New Menus using Menu Manager

4. Added a Module suffix to the created Menu Module “clsnav”

5. Again go to this file: /templates/t3_bs3_blank/css/themes/dark/megamenu.css

Add this code

.t3-navbar .clsnav{ clear:both !important; border: none !important; } .t3-navbar .clsnav li{ float: left !important; } .t3-navbar .clsnav .active a, .t3-navbar .clsnav a:hover{ border-radius: 0 !important; background: #000 !important; }

[ebrt Friend ebrtJoin date: February 2014Posts: 3Downloads:0Uploads:0]

#522808

Wonderfull ! Thanks a lot !

[Author]

Posts