Styling a Menu

  • PDF

Menu Styling

One of the most effective ways of creating a professional and dynamic website is to style the menus.  There are a lot of great resources on the web for creating CSS styled menus, a few are:

Listamatic - a great site with some examples of CSS and list based menus.

SEOConsultants - offers a brief tutorial on how to create a CSS and list based menu.

Joomla offers a very simple way to update the output style and  class of a list, in the Module parameters you can also define the style (list is my preferred gives you an unordered list and list items that can be styled with CSS). The end level is also useful for a multi-level menu. The standard div for a menu module is ‘moduletable’. You can modify this in advanced parameters using the module class suffix; for example if you added ‘_menu’ into the suffix the div for the unordered list would now be: ‘moduletable_menu’.

Here is a sample CSS entry to style the div moduletable_menu:

.moduletable_menu ul {  
margin: 0;
padding: 0;
list-style: none;
width: 140px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;