The Joomla! Forum ™

I have created a topmenu with drop downs. I then created another menu module using the same topmenu except I start it at Level 1. This correctly displays the submenu of the selected parent item. I would like for the title of this menu to be the same as the parent link selected, has anyone found a way to do this?

If you're not familiar with using the same "topmenu" module to create the submenu, see the link below. In my topmenu, I left the start and end levels at the default (0 and 10 I believe). My submenu start and end levels are 1 and 10.
http://www.theartofjoomla.com/magazine/ ... nique.html


Ex:
=============
Events
-> Calendar
-> Upcoming Events
Resources
-> News
-> Archives

If I select Upcoming Events link, I'd like the title for Side Menu to be Events. If I select News, the title would be Resources.

I've searched the internet for this topic and I've found a few others with this question, but was never able to find an answer. If anyone knows how to find the parent link, I can set the menu title using javascript / ajax in the index.php page dynamically.

Any help offered is appreciated, thanks!

I was able to figure out my problem, and thought I'd post my solution here for others that might be having the same issue.

In my template folder, I edited my modules.php file (/templates/[My Template]/html/modules.php). The name I used for this particular Menu Module was "Sub-Links", so edit this to match the title set in your module. Then I added a custom "id" to the <h3> tag used to display the title, '<h3 id="this_parent">'
=====

function modChrome_fx( $module, &$params, &$attribs )
{

if( !empty( $module->content) ) : ?>
<div class="moduletable<?php echo $params->get('moduleclass_sfx');?>">
<div class="tog">
<?php if( $module->showtitle != 0 ) : ?>
<?php

if ($module->title != 'Sub-Links')
{ // no change to other modules
echo '<h3>'.$module->title.'</h3>';
}

else
{ // custom code to display Parent link as title of submenu
// if user has javascript disabled, display default title of "Sub-Links"
echo '<h3 id="this_parent"><noscript>'.$module->title.'</noscript></h3>';
}

?>
<?php endif; ?>
</div>
<div class="cont">
<?php echo $module->content; ?>
</div>
</div>
<?php endif;
}
=====

Then in my template's index.php file, I added the following javascript code.

Please note that I have enabled the Breadcrumbs module for my site, so I parse that string to discover the parent link. Some browsers display the tags in lowercase, others in caps, so I did a string replace to make them all caps where necessary. Also in my case this displayed the parent link (level 0) for all sub menus, regardless of the number of levels.

=====
<script type="text/javascript">
function changeText(){

if (document.getElementById('breadcrumb'))
{ // if not on "HOME" page

var breadcrumbText = document.getElementById('breadcrumb').innerHTML;
// remove any extra spaces
breadcrumbText = breadcrumbText.replace( /^\s+|\s+$/g ,'').replace( /\s+/g,' ');
breadcrumbText = breadcrumbText.replace(/a>/g,'A>').replace(/span>/g,'SPAN>');
// Home text is displayed in breadcrumbs string
var splitBreadcrumb = breadcrumbText.split("Home");
var splitLink = splitBreadcrumb[1].split('">');

if(splitLink[1] != null)
{ // submenu selected

var splitLink2 = splitLink[1].split('</A>');
if(document.getElementById('this_parent').innerHTML != null)
document.getElementById('this_parent').innerHTML = splitLink2[0];
}

else
{ // if parent link of submenu is selected
var splitLink3 = splitLink[0].split('&gt; ');
var splitLink4 = splitLink3[1].split('</SPAN>');

if(document.getElementById('this_parent').innerHTML != null)
document.getElementById('this_parent').innerHTML = splitLink4[0];
}

}

}

window.onload = changeText;
</script>
=====

If you find any errors in my code, or know of a better way to accomplish this, please let me know.

Thanks

I couldn't get this to work on J 1.5.15. I can see that it's not displaying what's inside the H3 tag (src still says "Sub-Links") but not displaying in-browser, so I suppose that's part of the JS working. However it's not replacing it with anything, though breadcrumbs are turned on. Not sure why as I'm not the greatest with JS. What Joomla version are you using?

Have you seen any other solutions to this? I'd really like to get something like this working as well.

_________________
Zap! Squeak! Design!
print.web.identity.illustration
(...and a whole lot of Joomla too)
http://www.zapsqueak.com

This is great, just what I needed!

I did get it to work, one thing that wasn't in the writeup above is in the template index.php file, the module code needs to be changed to style="fx"

So I used the menu in the left module position, here's my code:
<jdoc:include type="modules" name="left" style="fx" />

For the javaScript, I ended up using a different method, since I just need the items in the main menu. I grabbed whatever a link was class containing 'active', and then grabbed the title tag from that. It works well. JQuery would be even easier, but for some reason it was conflicting with the template I am using.

Great work!

Hey jimb0,

Do you mind posting you're JS so I can give it shot? I think the previous JS might have been conflicting with something in my template.

Thanks!

_________________
Zap! Squeak! Design!
print.web.identity.illustration
(...and a whole lot of Joomla too)
http://www.zapsqueak.com

I'm no JS pro, but what I have works:

var mainId = document.getElementById("ja-mainnav");
var links = mainId.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
var temp = links[i].getAttribute("class");
if(temp==null){
temp = links[i].getAttribute("className");
}
if( temp.indexOf("active") >= 0 ) {
mainVal = links[i].getAttribute("title");
}
}

if(document.getElementById('this_parent') ) {
if(document.getElementById('this_parent').innerHTML != null) {
if(mainVal!="" && mainVal!=null) {
document.getElementById('this_parent').innerHTML = mainVal;
} else {
document.getElementById('this_parent').innerHTML = "Menu";
}
}
}

Im looking for all a links in a div with id of ja-mainnav
Then I get the a with class of active. IE needs 'classname', and others 'class'

Awesome, thanks! I'll give it a shot.

_________________
Zap! Squeak! Design!
print.web.identity.illustration
(...and a whole lot of Joomla too)
http://www.zapsqueak.com

It works, but sadly my menu system is proving to be too complicated to get it to work the way I want it too (Superfish Menu + 4 Levels Deep). Went back to using individual modules with different titles instead. Thanks for the tips though, I'll definitely keep it in mind for the simpler menus I come across.

_________________
Zap! Squeak! Design!
print.web.identity.illustration
(...and a whole lot of Joomla too)
http://www.zapsqueak.com

Yeah sounds like it could get complicated. A jquery pro may be able to help with that.

Wouldn't it be easier to change the breadcrumb-module to sow instead of all levels only the first level? and then put this module above the horizontal menu-module which starts on level 1.

If anyone has a solution please post it. The solution above is to complicated for many of us.

Any help is apreciated, thanks!

That may work by hacking the breadcrumbs component to take out the links, and to show only the top item.

But my method works well, I use Javascript or Jquery to target the active menu item, and then display that as the title.

Hey guys,

This is my first time using Joomla! and first time posting on the forums. This thread helped me figure out how I plan to do what you guys are doing: change my Sub Menu Title dynamically.

However, I have run into a problem. For some reason, I cannot get my JavaScript to function. The code looks pretty straightforward to me, and I am surprised that it's not functioning. Does Joomla! by default block setting innerHTML? That's the only thing I could figure is preventing my code from working.

Any help would be greatly appreciated!

This is the method that I am using:

In modules.php (this part works perfectly):

This adds an id to the header of my Sub Menu. The id is called "changeme".



JavaScript:

This is the part that seems to be not working. Even though the code looks good to me, and should be working correctly. Even if I manually set var currentMenuItemText = 'TEST';, nothing happens. This is what is leading me to believe that Joomla! by default is somehow blocking any attempts to set an elements innerHTML.

Update:

FireBug is telling me that getElementId is returning null. It appears to return null for any id that I plug into the function, even id's that are directly coded into the php template file. Not sure what is going on...

Haha, Ok. So, I solved my own problem. Hopefully, this will be a lesson to any other javascript newbies who come across the thread.

In the window.onload statement, if you place parentheses after the function (e.g., "changeText()"), then the function runs IMMEDIATELY. In this case, that means the function runs before the page is loaded.

If you use window.onload correctly, and you do not place parentheses after the called function (e.g., "changeText"), then the function will run after the page is fully loaded.

Thus, as it applies to my code, here is the correct & working JavaScript:



If you combine this with the edit to module.php that I posted earlier, this JavaScript will grab the text from the span that is inside the current menu item. It will then assign that text to the inner html of the header tag that I assigned an id of "changeme."

This allows a very simple way to keep your sub menu title dynamic.

If you don't have the main menu or the submenu on all pages, use this code:

I like your method, I may use it on a future project. Good work!

Your method works well. I tried it for another site, and I like it.

For my site I only need the selected main nav title, so here's my function:



The Joomla team should add our awesome code to the next release ;P

been trying to implement this.. and cant get it to work.... does anyone have all the code... clearyl working.

thanks

Tag this code to the end of the file "\modules\mod_mainmenu\mod_mainmenu.php"

$menu = &JSite::getMenu();
$active = $menu->getActive();
$module->title = $active->name;

No need for Javascript hacks.

Hi cjdell,

Your solution worked for me actually. I could not get the other js solutions to work.
But i would like to know if it's possible to get the title of the parent menu item instead of the active one.

thanks

From my templatetool class:

Thanks a lot nibra,
but i'm a bit confuse where the code you gave should go and incorporate with the previous answers.
I tried a few things but always get an error which i guess means that i am not placing it correctly.

That code belongs in a helper class. I use to store that class in the template folder. Let's say, you call the class MyTemplateTools in the file mytemplatetools.php in your template folder. Then in your template index.php, just say

So in bobthebob01's case the solution would be:

Well guys, i would like thank you very much for your help.
I must say that still could not get this to work. Feel kind of stupid about it.

But by researching more, i found this thread on the forum: viewtopic.php?p=1614528 which offer an even simpler way of achieving the result.

No need to add any javascript to the header, no need to have templatetools.php file a functions and calling it in the header. And no need no need to modify "\modules\mod_mainmenu\mod_mainmenu.php".

It just output what i needed.

but thanks to all the helps.

Cheers

ps: don't forget to set the "show title" when editing the menu module in the admin panel to "no"

I am working on making my menus have dynamic names like you all were working on here in this posting...

I see what you are saying but it is not working for me either. This is what i have done:

1. Added the following code to the mod_mainmenu.php

$menu = &JSite::getMenu();
$active = $menu->getActive();
$module->title = $active->name;

2. I added the following code to a file I created called "mytemplatetools.php" and have placed this file in the root of my template.

/**
* Get the current menu item's top level parent's name
*
* @since 1.1
* @param string $default The default name
* @return string Menu item name
*/
public static function getTopLevelMenuName( $default='' )
{
$menu = JSite::getMenu();
$current = $menu->getActive();
if ( !is_object( $current ) ) {
return $default;
}
while ( $current->parent != 0 ) {
$current = $menu->getItem( $current->parent );
}
return $current->name;
}

3. I added the following to the head of my index.php of my template.

require_once dirname( __FILE__ ) . '/mytemplatetools.php';
$module->title = MyTemplateTools::getTopLevelMenuName( 'Home' );

Am I doing this all correctly so far? I am still getting the active links as the title of my menu module. I want that title to be the parent to that menu.

If you could help me...i would greatly appreciate it.

Steve M.

Hi Guys, I was just looking to do the same, read through the posts and decided to pull all the ideas you had into one easy solution

modify templates/mytemplate/html/module.php
here you will see the various templates for how modules are layed out. for ease I created a new one (copy and paste the rounded one) and did my modifications to that, then in my template index.php I changed the module style to the new module name I created. here is my solution (cant take much credit as I've just used the information that everyone has posted but simplified it).

There is an additional bit of code that I've added to detect whether the $active-name is the parent and if not to displat the parent name, otherwise the title of the module will keep changing depending upon which sub-menu item has been selected.


And that's it! no javascript and only one file to modify.

Hi,

I'm re-opening this thread as i'm looking to do the same in Joomla 2.5.
I've tried but this but it was not working on joomla 2.5
Does anybody succeeded or find an alternative?

thanks

Here's what I came up with that's currently working for Joomla 2.5. I like it because it doesn't modify any core libraries or functions and it also only requires modifications to one file: "templates\%TEMPLATE_NAME%\html\modules.php"

Here's the function that gets the top level menu title


Next, you simply need to call that function in the modChrome... function.


Finally, as you probably see from the code, you now need to add the appropriate module suffix (in my case " dynamic_menu" where the space is important) to the menu modules for which you want the title dynamically set. Let me know if you have any questions and I'll do my best to answer them.

As one said: Dude... you rock! lol

Thank you very much dkrrunner for the clear explanation. I'll try it and will let you know.
But if it worked for you, i don't see why it should not for me. Unless it's a discriminatory script !! lol

Cheers

+1 to that

_________________
betweenbrain™ | http://www.betweenbrain.com
Construct Template Development Framework | http://construct-framework.com/