05.25.10
WordPress 3 Menus – CSS Label Structure
WordPress 3 creates unordered lists with CSS labels to allow you to create your menus. If you use the twentyten theme, you will get a horizontal menu with multiple levels for your main menu and functional but unformated lists for your widgets. Using the information below you can create CSS to format your menus.
The structure is slightly different for the main menu & the alternate menus.
The main menu is contained in a div with class=”menu-header”
Alternate menus that appear in various widgets are encased in the widget unordered list structure.
<li id=”nav-menuxx” class=”widget-container widget_nav_menu”>
where xx is the ID of the menu. You can count menus as you add them in the menu section or you can view the source code of your site after you’ve input the menu.
Then, within the widget, the menu is encased in:
div class=”menu-name of your menu-container”
The core of the list for both is:
ul id=”menu-name of your menu” class=”menu”
li parent menu item
ul class=”sub-menu”
li child menu items
ul class=”sub-menu”
li grandchildren entries, ad infinitum
All list item (li) entries in the core list have the following attributes:
id=”menu-item-xx“ where xx is the ID of the menu item. If for some reason you have to designate formating for a single line you can either count very carefully as you add menu items or you can view the source code of your site after you’ve input the menu.
Class=”menu-items menu-item-type-xxxxx menu-item-object-zzzzzzz [classes specified by you]
where the variable is based on the box you used to specify the menu item (the constant below fills in the red field above):
Box xxxxx zzzzzzzz
Category taxonomy category
Tag taxonomy tag
Post post_type page
Custom custom NONE
The classes will include any CSS classes you specified in the menu drop down when you created the menu item. (You can specify multiple classes.)
