Menu Items that Link to Pages

Links to pages tab selectors

Links to pages

Menu items that link to pages have 7 class selectors.

  • .tab
  • .tab-x
  • .tab-home
  • .submenu
  • .submenu-x
  • .item
  • .item-x

Links to pages selector hierarchy

The hierarchy of the selectors for menu items that link to pages is shown on the left. Unless overwritten by more specific styling, .tab-x styling will apply to all elements below .tab-x. Similarly all items below .submenu-x will take the styling applied to .submenu-x.

You can see this Thesis navigation menu in action here.

Tab Selectors


separately colored tab selectors

.tab This selector is applied to the highest level menu items, the menu items that always display in the menu bar. It applies to all of the menu items that link to pages but not to those that link to categories. In this way it is similar to .menu li except that .menu li applies to all of the top row menu items, both page links & category links.

.tab-x This selector applies to an individual top level menu item where “x” is the number assigned to the tab. the tabs are numbered sequentially from left to right: .tab-1, .tab-2, .tab-3 and they represent a specific location on the menu bar. You can re-arrange your top level menu items any way you want but the leftmost tab will always be .tab-1, followed by .tab-2, etc.

.tab-home The exception to this is when the “home” page is also the blog page. If your home page is actually a static “front page” then this exception doesn’t apply. When your home page is the default WordPress configuration then the tab that represents it is .tab-home. After that the tab numbering begins with .tab-1.

CSS for separately colored tabs

.custom .tab-1 a
{
    background-color: #3399FF;
}
.custom .tab-2 a
{
    background-color: #9999FF;
}
.custom .tab-4 a
{
    background-color: #FF99FF;
} 

You can see this Thesis navigation menu in action here.

Submenu Selectors


Illustration of submenus

CSS for separately colored submenus

.submenu This selector applies to all menu items that are not .tab and yet link to pages. You can use this selector to style all of the menu items below the navigation bar together. However, this will not change the appearance of any menu items that link to categories.

.submenu-x Similar to tab-x this selector applies to each column of submenus. “x” represents the number assigned to the column which always begins with .submenu-1 on the left and continues sequentially to the right: .submenu-2, .submenu-3, etc.

You can see this Thesis navigation menu in action here.

.custom .tab-2 .submenu-1 a
{
    background-color: #CCFFCC;
}
.custom .tab-2 .submenu-2 a
{
    background-color: #CCFF99;
}
.custom .tab-2 .submenu-3 a
{
    background-color: #CCFF66;
}
.custom .tab-2 .submenu-4 a
{
    background-color: #CCFF33;
}
.custom .tab-2 .submenu-5 a
{
    background-color: #99CC00;
} 

Item Selectors


Illustration of submenu items

.item This selector is applied to all menu items that are not .tab and yet link to pages. It takes precedence over .submenu but when used will have the same effect. You can use this selector to style all of the menu items below the navigation bar together. And similar to .submenu it has no affect on the appearance of menu items that link to categories.

.item-x This is the lowest level selector and can be used to style an individual menu item. Each menu item is assigned a number that proceeds through the menu structure from left to right and top to bottom. This number doesn’t “stick” to any specific item or location and is reconfigured each time the navigation menu is changed. For this reason individual styling based on .item-x should be made only after the navigation menu is fixed.

Continue Reading

  1. The shape and structure of the menu.
  2. The general appearance of the menu.
  3. The specific appearance of each menu item
    1. Menu items that link to “pages”
    2. Menu items that link to “categories”

CSS for separately colored menu items

.custom .tab-2 .item-17 a
{
    background-color: #FF66CC;
}
.custom .tab-2 .item-22 a
{
    background-color: #FF9966;
}.custom .tab-2 .item-25 a
{
    background-color: #6699FF;
} 

You can see this Thesis navigation menu in action here.

There is an exception to this granular styling and that is menu items that link to offsite pages. If you use the “Add More Links” function of the Navigation Menu those links won’t be assigned a menu item specific class. Those links will only take the general styling.

{ 1 comment… read it below or add one }

syahrilhafiz May 25, 2012 at 8:22 am

thanks. it’s work!

Leave a Comment