menu and submenu for joomla

There are a number of great improvements to menus in Joomla 1.5. These are focussed on providing more flexibility to template designers and making Joomla sites more accessible and W3C valid. Specifically, significant improvments have been made to bulleted lists to now allow better submenus (for things like dropdown menus) and image replacement.

Menu and Module Class suffixes

These control the appearance of menus. All of the menus use CSS in the template to style how they look. By carefully coding the CSS, the menuís appearance can be quickly and easily changed based on the suffixes used. An example of how this works might be different colored rounded boxes as shown below with our Joomlashack examples. These are four popular templates:

• demotemplates.joomlashack.com/lush
• demotemplates.joomlashack.com/element
• demotemplates.joomlashack.com/simplicty
• demotemplates.joomlashack.com/lightfast 

Menu Styles

There are two main ways to display your menu. One is to use a table for the layout (either vertical or horizontal) and the other is to use a bulleted list. In other tutorials I have discussed at length template design and how to make W3C valid websites. A big part of this is the subtle design differences between using tables or pure CSS for layout. This is getting technical, just know that you need to select whatever the template documentation calls for. Also, you can't have sublevels currently in 1.0.X with a flat list.

At the time of writing, Joomla 1.5 has legacy support for the previous way that a bulleted list was rendered (flat list) and a new way that allows more flexibility (list).

Thus there are currently 4 options:

1. List - New method of showing a bulleted list
2. Vertical - uses a vertical table
3. Horizontal - uses a horizontal table
4. Fat List - old method of showing a bulleted list

Submenus

Joomla has a feature where you can create submenus and they can be displayed in various ways. In the previous version of Joomla, it was not possible to have submenus if you were displaying your menu as a flat list. This was an issue as a bulleted list is a much more standards compliant method of displaying links.

In 1.5, this functionality is added to menus. It allows you to have submenus and flat lists. This is very important, as in the hands of a skilled template designer it allows you to do things like have dropdown menus and images for links without having to resort to JavaScript or tables, both of which are bad for accessibility, SEO and W3C compliance.

If "always show submenu items" is set to "yes" you get the out put shown below. Note that you MUST have the menu style selected as List.

<ul class="mainmenu">
<li class="level1 item1">
<a href="/">Services - Standard Layout</a>
</li>
<li class="level1 item2">
<a href="/">Services - Blog Layout</a>
</li>
<li class="level1 item3 parent">
<a href="/">About Us</a>

<ul>
<li class="level2 item1">
<a href="http://www.compassdesigns.net">Compass Design</a>
</li>
<li class="level2 item2">
<a href="http://www.joomlashack.com">Joomlashack</a>
</li>
</ul>

</li>
<li id="current" class="level1 item4 active">
<a href="/">Home</a>
</li>
</ul>

Notice the new output. There are multiple classes on the <li> tags allowing advanced templating.

This feature is very welcome to the flexibility of menus in Joomla. Thanks should be given to Louis Landry to working with the developer community to finalize these improvements. They are discussed further on his dev blog at the Joomla site.

 

ALL other useful information, please refer http://www.joomlashack.com/joomla-15