Menu CSS
Menu Modules CSS formatting
Joomla menu's are very flexible in Joomla 1.5 because of the Unordered List menus.
Menu Style:
Joomla 1.5.X has a new very improved menu system.
The menu html output style setting displays by the core menu system in 4 ways.
Please note: Each setting has a different HTML output. The styles can be found for menus
in the cssnavigation.css style of your base template file.
List of four master menus.
- List
- Vertical Legacy
- Horizontal Legacy
- Flat list Legacy
1. List menu style
The ".menu" class is the master class for list menu style and is new to Joomla 1.5.X.
The code below shows you the default code output.
Now if you notice that the code output is in unordered list.
Joomla's menu system also supports nested menus.
Any nested menus are also in unordered list inside LI tags of the master or parent UL tag.
An example of a five level menu can be found in the ".navigation.css" style sheet of your template folder.
The current selected link on the menu has a CSS ID of "#current" this can be used with CSS to hight the active link.
Please note: That Joomla's default menu and its vertical menu it can be made into a horizontal menu with some Javascript and or a third party module.
2. Vertical Legacy style menu:
The Vertical menu is the old Joomla 1.0.X default menu.
It uses tables and has two CSS class ".mainlevel" for top level links and ".sublevel" for sub level link styles.
The current menu uses a CSS ID called "#active". All sub level menus are tables. Its best to use the List menu style for Joomla 1.5.X templates.
3. Horizontal Legacy style menu:
The Horizontal menu is the old Joomla 1.0.X menu. It uses tables and has two CSS class ".mainlevel" for links.
There is no sub level support with this menu style.
As you can see for the code bellow the table uses a "nowrap" parameter on the html table data so that the links go horizontal.
The current menu uses a CSS ID called "#active".
4. Flat list Legacy style menu:
The Flat list menu is the old Joomla 1.0.X menu.
It uses unordered list and has a CSS ID for ".mainlevel" for the UL tag and a ".mainlevel" CSS class for the LI tags.
This menu type does not support sub menus. The current menu used a CSS ID called "#active".
|
