Menu Items that Link to Categories

Illustration of menu links to categories

Links to categories

Menu items that link to categories have 3 class selectors.

  • .cat-item
  • .children
  • .cat-item-x

.cat-item This selector is applied to the highest level menu items and applies to app menu items that link to categories unless it has been specifically modified. In the illustration above .cat-item was given a custom background color which changed all of the menu items that link to categories.

You can see this Thesis navigation menu in action here.

Links to categories selector hierarchy

The hierarchy of the selectors for menu items that link to categories is shown on the left. Unless overwritten by more specific styling, .cat-item styling will apply to all elements. .children will apply to all elements below the top level. Similarly all items below .cat-item-x will take the styling applied to .cat-item-x.

CSS for styling all links to categories

.custom .cat-item a
{
    background-color: #00FFFF;
} 

Children Selector


illustration of children links to categories

[column width=”46%” padding=”4%”].children This selector is applied to all of the menu items below the highest level. It applies to all of the menu items that link to categories but not to those that link to pages. It over rides .cat-item but can be over written by .cat-item-x. In the illustration above the styling for .cat-item is over written by the styling for .children.

You can see this Thesis navigation menu in action here.

CSS for styling children links to categories

.custom .cat-item a
{
    background-color: #00FFFF;
}
.custom .children a
{
    background-color: #CC9900;
}

Cat-item-x Selector


styling of individual categories

“].cat-item-x This selector is applied to an individual menu item and all of the menu items below it. It gets its number from the category id number and thus always links to the specific category regardless of where it actually is in the menu structure. In this way it behaves differently from .item-x. .item-x always represents a place in the menu hierarchy regardless of the content it links to. .cat-item-x always links to the category with the id of x. It over rides both .cat-item and .children but can be over written by a subsequent .cat-item-x. In the illustration above the styling for .cat-item and .children is over written by the styling for .cat-item-21.

You can see this Thesis navigation menu in action here.

CSS for styling for individual categories

.custom .cat-item a
{
    background-color: #00FFFF;
}
.custom .children a
{
    background-color: #CC9900;
}
.custom .cat-item-21 a
{
    background-color: #CC6600;
}

styling of individual categories

The above illustration demonstrates how .cat-item-x styling affects the subsequent down line menu items. In this example .cat-item-3 is styled by .cat-item, all of the menu items below it are styled by .children until it reaches .cat-item-9 where it and all those menu items below it are styled by .cat-item-9. In the previous example the styling applied by .cat-item-21 would be over written by a styling applied to .cat-item-24, along with all of the subsequent menu items.

You can see this Thesis navigation menu in action here.

CSS for styling for individual categories

.custom .cat-item a
{
    background-color: #00FFFF;
}
.custom .children a
{
    background-color: #CC9900;
}
.custom .cat-item-21 a
{
    background-color: #CC6600;
}
.custom .children .cat-item-9 a
{
    background-color: #CC0000;
}

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”

{ 1 comment… read it below or add one }

Pierre Cöté October 21, 2010 at 6:18 pm

Dear Rick

I just stumbled on your site today and this is not good. I’v just emailed “girlie at diyanswers@gmail.com and asked her to add your site here : ( http://diythemes.com/forums/showthread.php?10336-Resources-Nav-Menus ).

I’v been struggling with navigation for a while now ( WP 3.0.1 / thesis 1.8 ), and my goal was to highlight the parent / grand-parent while on “single post”.

I’v switch to the WP menu, to structure “pages / categories”, and achived this ( single post highlighting ) on my test site ( http://pierrecote.fondationcem.org ). – not very elegantly –

Did/do you by any chance tackled that fish ( single post highlighting ) for Thesis or WP menus ?

You will find one of my treads on diythemes.com/forums ( http://diythemes.com/forums/showthread.php?39258-Category-highlighting-for-single-post-%28-wp-menu-%29./page2 )

You are a great prof / ressource / help …. etc.

Pierre

Leave a Comment