mainlevel class

In joomla, menus are diplayed in 3 different formats depending on the value of the Menu Style parameter:

  • Vertical
  • Horizontal
  • Flat List

You can set this parameter in joomla menu module administration area as shown in the following image.

Joomla Main Menu Module Administration

 

We have created several snapshots to show you how menu style parameter can affect the HTML output of menu module.

 

Menu Style = Vertical

If you choose vertical style for a menu, the menu items are displayed in rows of a table. Submenu items are also displayed with an intended offest. You should not choose vertical style for your menus if you would like to have a Table-Less design. mainlevel class is assigned to menu items as shown in the following image.

 

Joomla Main Menu Module - Menu Style = Vertical

 

Menu Style = Horizontal

In Horizontal style, menu items are displayed in a table horizontally (In one row). Submenu items are not diplayed and menu items are separated by a spacer character which can be specified in menu module administration area. mainlevel class is assigned to menu items (A Tag) and spacer character (SPAN Tag) as shown in the following image. This setup will not present a table-less output.

 

Joomla Main Menu Module - Menu Style = Horizontal

 

Menu Style = Flat List

In Flat List view, menu items are displayed in an unordered list (UL) element. Submenu items are not displayed in this option. You can define css styles to layout the menu either horizontally or vertically. mainlevel class is assigned to menu items (A Tag) as illustrated in the following image.

 

Joomla Main Menu Module - Menu Style = Flat List

 

Defined in:

Com_content/content.html.php

Assigned to:

A, UL and SPAN Tags

mainlevel class example

a.mainlevel{
/* CSS Styles */
}
a.mainlevel#active_menu{
/* CSS Styles */
}
ul#mainlevel{
/* CSS Styles */
}
ul#mainlevel li{
/* CSS Styles */
}
< Prev   Next >