2008.12.22 21:52:54
Susan Jackman

For many important reasons, including SEO and accessibility, it is always best to use W3C valid code and lean code when it comes to creating your menus.  This is something that we designers and developers have been learning to do with CSS and static html for some time now, but applying what you have learned to Joomla's dynamic menu’s can be a little tricky.



There are a number of techniques you can use with CSS to get more visually attractive menus; all of them use unordered lists (bulleted lists) to create the menu.

The trick to using these types of menus in Joomla is to use mod suffixes to define different menus. Menus, as always, need a lot of CSS styling.  To do this in Joomla, we assign a menu with a module suffix such as _main. (This is done in the modules parameters for the menu in Jooml's backend)

We use .moduletable_main in our css for all the menu styling.

For example:

.moduletable_main {
margin-bottom:1em;
}

.moduletable_main h3 {
font:1.3em Arial,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}

.moduletable_main ul {
list-style:none;
margin:5px 0;
}

.moduletable_main li {
background:url(../images/leftmenu.png) bottom left no-repeat;
height:24px;
font:14px Arial, sans-serif;
margin:10px 0;
padding:0 0 0 10px;
}

.moduletable_main a:link,.moduletable_main a:visited {
color:#fff;
display:block;
text-decoration:none;
padding-left:5px;
}

.moduletable_main a:hover {
text-decoration:none;
color:#fff;
background:#ADADAD;
}

So now all you need is a different module suffix assigned to each menu and you can have an endless number of unique menu's!


  CSS | Tips | Joomla | Web Development | Susan Jackman