Overriding mod_mainmenu output structure

[undoIT]

It is too bad that the helper.php file needs to be hacked. I wanted to get rid of the span tags completely, and it seems that is the only way to do it.

[M4rc0]

undoIT, and did you succeed with the "|" on the menu ?

[undoIT]

undoIT, and did you succeed with the "|" on the menu ?

I just used the native mainmenu list setting and applied a CSS style for right border to act as delimiter and then set the border display to none for the last li in the menu. It would be nice if Joomla provided a clean horizontal menu option to cut down on code bloat in addition to the list format. Since this isn't available, CSS styling on the list is the next best option.

[madisn]

Hello, I have 3 problems with the menu output:

1. Id like it to be much easyer.
2. I'd like active <a href> to have an id or class.
3. I dont like the <span> but they were easy to delete, so that problem is solved.

And about problem number one:

Code: Select all

<ul>
<li id="active"><a id="active" href="#">Some link</a>
<li><a href="#">Link2</a>
<ul>

It would be the best if there would be a change to add a class or id for every item from backend like in default module. And the code coulud have linebrakes like in my code.
Is it too hard code ?

Thanks, Madis.

[eivihnd]

I want to format my menu like the following code, to make it easier to use with javascript. Does anyone know how the override of mod_mainmenu should be to get a output similar to this:

Code: Select all

<ul>
   <li>
      <a><span></span></a>
   </li>
   <li>
      <a><span></span></a>
      <ul id="child1">       <-- id="child $i " where $i = int
          <li>
            <a><span></span></a>
         </li>
      </ul>
    <li>
</ul>

And, is there a extension or a override that makes it possible to add javasctipts events to the links in the menu? (like onmouseover)

thanks

[Nic W]

I came across this thread as I have been trying to figure out how to get a rel="nofollow" attribute into joomla menus without using a another module as I already use extended menus to customise the menu output.

I started a nofollow menu thread but didn't get any answers (just my own ramblings) and the hacks I found failed to work, eventually I boiled it down to some XHTML code that was stripping out the link attributes but I am not an expert coder so was not sure where to start.

This thread talks about the JSimpleXMLElement responsible for building the menu so I wondered if somebody could point me in the right direction as this (relatively simple request) is turning into a real problem for me and a whole bunch of others.....

Thanks,

Nic

[grenade]

Hi Joomla Community, I've been reading through the forum and looking at the Joomla code for this module, and now I think it's time to reach out for some advice from an experienced PHP / Joomla developer.

The default list item output for this module is fine for all my menus except for 1; how can I just override the output for that 1 menu? The menu has no child elements. I would like the output for this special case menu to be as follows:

Code: Select all

<li id="item_1">
	<h2><a href="/item1.htm">Item 1</a></h2>
	<p>Short description of Item 1</p>
</li>

I am thinking that'd I'd have to grab this specific menu and remove it from the array that gets processed by the helper.php file. But I can't quite figure out how to accomplish this; I'm assuming it's best to keep everything in /my_template/html/mod_mainmenu/default.php without modifying the helper.php file.

So far, what I've been able to do is at least create a variable for the menu items that need to be removed with something like this:

Code: Select all

$mainmenu	= $menu->getItems('menutype', 'mainmenu');

But I am not sure how and where to use this in some logic to accomplish what I need.

Any help would be appreciated.

[arlen]

If it's not something that's going to change, why not make it a custom module instead of a menu?

[grenade]

It may change, and I also need the breadcrumbs working and active states tagged. I would think it's simpler to modify some existing module / theming than building my own.

[arlen]

No, no. For something like this I think it's easier to build your own.

Go to the Module Manager and click "New". From the types presented select "Custom HTML".

Now put the HTML for that module in it.

You're done. You need to change it later, edit the module.

[prateekshaweb]

hi

there is another very good option.. you can use extended menu module..

this module supports templates. that means code is seperate and use a templating system to output code. it is a powerful with a small learning curve. but you can get the format you want by just tweaking the template. you do not need to tweak the code everytime.

there are also readymade templates available for extended menu. and all of them are good.

as times it is a better option than modifing the mod_mainmenu as the code is not easy to grasp

sumeet shroff

[grenade]

Thanks Sumeet, I will give Extended Menu module a try.

arlen - what would be needed to address the breadcrumbs / active state requirements with your solution?

[arlen]

I was posting from your original single menu item request. The way you emphasized "1" in it, I went for a quick solution tailored for small menus. It won't scale well, so if you're building more than the one item, I'd use something different. The key is that it's a separate module, so nearly any menu module will work for it.

You could also simply override the menu template output, but only if you want to get into it. (If you do, at the same time I'd fix the invalid XHTML it emits when the menu is empty.) The secret there is to give your special menu a class suffix, then check for that suffix in your override.

This old thread gives you some basic information on overriding menu output, as does this blog post and this one. It's really not that hard to do. Just remember since you want all other menus output as "normal", you'll need to test the class and do an if branch to your specialty code if the right class is found.

One word of warning with extended menu: don't get too tempted by the dynamically-built option. Joomla doesn't like dynamically built menus. Sometimes you will get what you want, and sometimes it will go horribly wrong. (I learned this the hard way, when I had the same page come up with five different page titles, depending upon the path you took to get there, and the breadcrumbs module had a complete breakdown with it.)

[natacha]

I'm surprised noone has posted the mainmenu override solution for this yet.

I came across this thread whilst looking for a solution to override the mainmenu render code without having to hack joomla. It is not difficult and there is no need to hack the helper.php or core joomla code - everything can be done within the override file.

First, read this excellent article:
http://www.fatica.net/blog/69-overridin ... utput.html
My solution started with this override template.

As I have a complex menu made of tabs and curves that has to be backwards compatible with many browsers, I needed to replace the inner span tags within each each <li> element different html. Hence I adjusted the rendering of the element by manipulating joomla's xml menu object instead rather than using a straight string replace like in the above solution.

I got the hint from this thread to use the SimpleXML php functions (see http://www.w3schools.com/php/php_ref_simplexml.asp) and I simply traverse the xml menu using a foreach loop, adding the extra div nodes as required:

$xml = new SimpleXMLElement($result);
foreach ($xml->li as $li) {
$menuTitle = $li->a->span[0];
$li->a->addChild("div", "&nbsp;");
$li->a->div[0]->addAttribute("class", "tabLeft");
$li->a->addChild("div", $menuTitle);
$li->a->div[1]->addAttribute("class", "tabMiddle");
$li->a->addChild("div", "&nbsp;");
$li->a->div[2]->addAttribute("class", "tabRight");
unset($li->a->span[0]);
}
$result = $xml->asXML();
return $result;

(The above code replaces all the contents of the roundedCornerPatch function in the original article.)

The final trick is to use unset() to completely remove the inner span tag (this is not clear from the SimpleXml reference site)

So the original menu went from this:

<ul class="menu">
<li id="current" class="parent active item73"><a href="http://lyceum.local/"/></li>
<li class="item74"><a href="/corporate-services"><span> Corporate Services</span></a></li>
</ul>

to:

<ul class="menu">
<li id="current" class="parent active item73"><a href="http://lyceum.local/"><div class="tabLeft">&nbsp;</div><div class="tabMiddle"> Home</div><div class="tabRight">&nbsp;</div></a></li>
<li class="item74"><a href="/corporate-services"><div class="tabLeft">&nbsp;</div><div class="tabMiddle"> Corporate Services</div><div class="tabRight">&nbsp;</div></a></li>
</ul>

This is a fairly simple eg but gives you an idea of the extent to which you could completely manipulate the menu's html output.

Example override template file is attached.
Hope this helps someone out there.

[natacha]

O, and if you have several different menus on your page you can vary the output by setting a Menu tag ID for each menu (from the menu's module manager in Adv parameters settings)

Then you can do something like:

$xml = new SimpleXMLElement($result);
$attributes = $xml->attributes();
if ($attributes->id[0] == 'mainmenu') {
...
} else if ($attributes->id[0] == 'submenu') {
...
}

[areafiftyone]

Hi,

I need to effect the <div> that wraps around the <ul> in mod_mainmenu with an id="" . At the moment the class="moduletable" is applied to the <div>, and I can add a suffix to this. But because of the way my CSS cascades I need to use an id="".

The problem is I cant find the lines of code that create this <div> in the mod_mainmenu, any ideas?

Thanks
Gazza

[natacha]

I did this a quick way by adjusting my index.php template.
eg I added the surrounding div with a 'tabs' id:

<!-- BEGIN: MAIN NAVIGATION -->
<?php if ($this->countModules('hornav')): ?>
<div id="tabs">
<jdoc:include type="modules" name="hornav" />
</div>
<?php endif; ?>
<!-- END: MAIN NAVIGATION -->

The css works quite happily, and seems to ignore the additional inner div the mainmenu module produces.

Does this work for you?

[natacha]

I've also just found the file modules.php file in my overide template's html directory.
I 'think' this is where you can override the module's output in a similar fashion to the mainmenu module (though not 100% as I've never tried)

[areafiftyone]

Thanks Natacha, but I'm going to be picky

I really want to effect the existing <div>, would prefer the markup in the rendered HTML to be as lean as possible.

I have found the code, but its in:
templates > system > html > modules.php

When I drop this file into here:
templates > my_template > html > modules.php

I get problems, so I don't think this its the correct place to run the overide from.

How do I add the feature to the module admin page so an admin can enter some text, and it be put as the id=" name" for the <div>.

Thanks
Gazza

[natacha]

You can specify an id for the module's div via the Extensions-module mgr panel.

Otherwise you can override teplates for all modules, components and plugins
See:
http://docs.joomla.org/How_to_override_ ... omla!_core
and
http://community.joomla.org/blogs/commu ... -html.html

The trouble is that the mod_mainmenu class does work slightly differently so I'm not 100% whether the mod_mainmenu module id can be tweaked the way you want it using simple overrides. I'd really try to avoid hacking the core - it prevents you upgrading the site.
You can't just adjust the css to include the additional div the module creates?

Alternatively you could use the 'Custom HTML' module but this really only does what I mentioned in the first place a different way.

Other than the above methods I'm not an expert on the core code. I've only been using joomla for 1 week now LOL

[areafiftyone]

You can specify an id for the module's div via the Extensions-module mgr panel.

I cant find this in Extensions > Module Manager

It looks like you can only specify the id="" on the <UL> NOT on the <div>

[natacha]

Yep, that's why wrapping the module mgr's div with another div specified in my index.php file is the way I got around it

[__alex88]

This is very bad. I need to have more than just one element inside my menu item, because I need to have rounded corners. I don't understand why Joomla wants to insert html that web designer should make. Why screw up system with grabage html, which most likely will limit website designers possibilities without editing code?

[jamesreed]

Just wanted to post and say thankyou very much midimarcus! your override has solved a problem I've had for almost a year now, brilliantly avoids changing core files! Edited your default.php and added an 'else' and one extra line and a bit of CSS and hey presto! thanks again.

Lines: 89-95
else
/* counter == max, the it is the last item of its sub-menu */
if ($item_per_level_counter[$my_level] == sizeof($node->my_parent->children())-1)
$node->addAttribute('class', $node->attributes('class').' lastItem');
/* for rest make give them a class of middleItem */
else $node->addAttribute('class', $node->attributes('class').' middleItem');

CSS:
/* simply add spacers to menu item using a border */
li.middleItem { border-left: 1px solid #ff0000; border-right: 1px solid #ff0000;
padding-left:8px; padding-right: 8px; margin-left:8px; margin-right:8px; }

[jamesreed]

Hi, in reply to the PM from shadow725, you can add a sub title or description to the menu using the template override. Edit the default.php file above and add the following lines:

Line 84:
if ($node->name() == 'li')
{

// add a new span for description below menu item
$nn=$node->addChild('span');
// use menu alias as text for menu description
$nn_name=$menu->getItem($id)->alias;
$nn->setData($nn_name);
$nn->addAttribute('class',$node->attributes('class').'subdescription');

/* counter == 0, then it is the first item of its sub-menu */

It's then down to you to CSS style the new 'span' which has a class of 'subdescription'.

thanks,
James
Startnet Ltd, London
http://www.startnet.co.uk

[alexwai]

CirTap > Thanks a lot. You post solve my problem on changing the list class.

[micjoomic]

I'm starting to pull out my hair because for some strange reason (possibly a php scope issue?) I cannot access the $params object that would at least contain the menu name ($params->get('menutype')) by doing

global $params;

from inside the callback.

edit2:

I finally got it working, by making alternate callback functions, then assigning the callback passed to ::render() based on stuff in $params. It still would be handy for that entire params structure to get passed to the callback instead of the pared-down one that does. In the helper class, it gets passed down the chain just one step shy of where I needed it

This has been bugging me as well. Anyone has a definite answer on why we can't access $params from inside the callback and how we can overcome this ?

[nicmehr]

I'm starting to pull out my hair because for some strange reason (possibly a php scope issue?) I cannot access the $params object that would at least contain the menu name ($params->get('menutype')) by doing

global $params;

from inside the callback.

edit2:

I finally got it working, by making alternate callback functions, then assigning the callback passed to ::render() based on stuff in $params. It still would be handy for that entire params structure to get passed to the callback instead of the pared-down one that does. In the helper class, it gets passed down the chain just one step shy of where I needed it

This has been bugging me as well. Anyone has a definite answer on why we can't access $params from inside the callback and how we can overcome this ?

can you explain more?

[micjoomic]

There's not much more to it. I'm trying to process some nodes from within the default.php callback function and I need to choose whether I'll make changes based on the menu Tag ID or the menu name. Outside the callback function, I can call $params->get('menutype') and it will return eg "mainmenu". INSIDE the callback function this is not possible.

[manzanofab]

I know this topic is quite old, I personally use J3 but at work we still have 1.5 and I recently has to override the menu
a few tips that help me a lot:
the whole menu is an object, that has
_attributes (that you could add or modify by using the function addAttribute('attr name', 'what ever you want to add');)
so for instance a way to loop through all the "parameters"
foreach ($node->children() as $child)
{
$node->addAttribute('attr name', 'what ever you want to add');
}
or even better if you want to loop inside
foreach ($node->children() as $child)
{
foreach ($child->children() as $nextChild)
{
$nextChild->addAttribute('attr name', 'what ever you want to add');
}
}
it might seem confusing but something that help me heaps was using this
$data = json_encode($NextChild);
var_dump($data);
then using a tool like
http://jsoneditoronline.org/
i copy paste into that page and it lets you see how the object is composed (you need to be careful because if it has many childs you will have in the middle of the string something like string(xxx) if you copy this the json stirng is incorrect so you will not be able to see the object)
the other tool is the following website:
http://api.joomla.org/11.4/Joomla-Platf ... $_children
and if you want to modify any data
$NextChild->_name='what ever';
$NextChild->_data=' what ever';
I hope i didnt confused too much
but with this i was able to "walk" around this