Raised Eyebrow Blog

On my search for a css-list-based SEO friendly drop-down menu that works in older versions of Joomla, specifically Joomla 1.0 I came across this great module called Extended Menu.  It is meant to extend the functionality of the mainmenu module which is a default Joomla module that comes with the Joomla installation.  This module is great because you can use son of suckerfish, suckerfish, mountaintop corners, csstree templates, dtree,  or start from scratch and do-it-yourself.

Below is a step-by-step demonstration on how to get these menus working.

1. Download the module here
2. Login to Joomla and go to Installers > Modules
   From here you can browse your computer and upload the module you just downloaded from step 1.
3. Always, always set up a test template and page to play with.  You don’t want your visitors viewing your menu installation in progress across your entire website!
   • Create a copy of an existing template (root > templates > template name) and re-name it to whatever you wish.
   • Create a copy of an existing content item (content > all content items) and rename the content item so you can find it easily.
     
   • Create a menu item for the new content item you have just created (menu > mainmenu) by clicking on ‘New’.  In this example we will use “Link – Content Item”, click “Next”, follow the on-screen instructions and then click on “Save”.
   • You will need to temporarily publish the menu item you have created by clicking on the Published Icon (should appear as an x for unpublished, and a box with a check mark for published).  Once you have published this menu item, open a new tab in your browser and navigate to the page you have created.
   • Now you will need to apply the template you created earlier (site > template manager > site templates).  Find your template in the list, click the radio button beside it and click on “Assign” in the top right.  You can select multiple pages by pressing command and clicking on the name so be careful not to deselect any pages that may have previously been selected.
     
   • Now you can un-publish the page you created so it will not show up on your live website.  Repeat step 4D by clicking on the box with a green arrow under the “Published” column.
4. Now you need to assign the new module to a new position so that we can call it in our template (site > template manager > module positions).  In one of the empty boxes type in a name for your new position.  In this example I have used topnewmenu.
5. Back to the fun part – coding!  Open up root > templates > template name > index.php
   
   You will need to add <?php mosLoadModules( ‘topnewmenu’ ); ?> to where you would like your dropdown navigation to appear.  It is always a good idea to put a wrapper around this.  In this example I have used id=”nav”.
6. Now we need to style it! You can do this from scratch or you can download one of the many options listed here.  I would suggest using son-of-suckerfish horizontal menu.
7. Once you have downloaded the appropriate files, you will need to upload them to your template folder you created earlier in this demonstration (root > templates > template name).
8. Now all that is left is to style the css (root > templates > template name > css > menu.css) and you have a SEO friendly css-list-based dropdown navigation for Joomla!