AlteredEgg.com - Tutorial: MooTools Link Descriptions in Joomla Menus

Tutorial: MooTools Link Descriptions in Joomla Menus

I recently had a client who needed to include a short blurb underneath each menu item on their website. Joomla 1.6 does not currently offer this as a standard feature, and the only 3rd-party menu system I found which could do it had too many other features, was buggy, and not very user-friendly.

My solution requires the MooTools 1.2 Javascript framework which is included with Joomla 1.6. Users of the 1.5 release will probably need to convert my script to use the old MooTools syntax or else they must enable the MooTools upgrade plugin in their plugin manager.

1. Save the following code in its own file (I named it "menuHelper.js"). A good place is in a scripts folder within your site template. IMPORTANT: this script targets items in the menu with the "joomla-nav" class. You may need to edit that part below to match the CSS class of your own menu.

 window.addEvent('domready', function() {
    $$('.joomla-nav li a').each(function(el){
        var comment = el.get('title');
        if(comment){
            var desc = new Element('div.description',{html:comment});
            desc.inject(el,'after');
        }
    });
});

2. Place a link to this script within the head tags in your template's index.php file:

<script type="text/javascript" src="/templates/your_template/js/menuHelper.js"></script>

3. Now the fun part. In your Joomla admin pane, browse to your menu (click Menus>YourMenu) then edit your menu item by clicking its title in the list that appears.

Where to add the link description

4. In the panels in the right column, click "Link Type Options" and enter your link description in the "Link Title Attribute" box. Then click the "Save & Close" button (or just Save in Joomla 1.5).

Now if you browse to that page on your website you should see some additional text included with the menu item. If desired you may add a rule for "div.description" to your stylesheet which formats it nicely.

How does it work?

The JavaScript finds each link in your Joomla menu and reads its "title" attribute which we added. If it finds it, it converts the text into a visible HTML object and inserts it into your page. People with Javascript disabled will not see the text but may still have access to it either by pointing to a link or via their screen reader software.

The finished product:

Adding descriptions to a Joomla menu