The Specific Appearance of Each Menu Item

Illustration of tab elements

Granular customization is possible

Thesis makes it possible to customize the appearance of each menu item. The default behaviour of the Thesis menu is to apply a specific style across the entire menu. Therefore a menu item that links to the current page looks the same no matter which item it is. Parent menu items all look the same and hover items all look the same. However, there is another “class” system that is applied programatically to each menu item that allows you to style any item differently. We’ll refer to this system as the “Granular” system.

The Granular sytem has 2 big divisions.

  1. Menu items that link to pages
  2. Menu items that link to categories

These divisions have different naming systems and similar but not identical functionality. If your menu includes both pages and categories you will need different css for each.

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.

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 of the HOME tab as shown above

.custom .menu .tab-1 a
{
    background-color: #00FFFF;
}
.custom .menu .tab-1.current a
{
    background-color: #FF00FF;
} 

Structure of the Granular class system

  • .menu . tab – Links to Pages
    • .menu .tab-1
      • .submenu-1
        • .item-1
        • .item-2
          • .submenu-2
            • .item-3
      • .submenu-1
        • .item-4
    • .menu .tab-2
      • .submenu-1
        • . item-5
      • .item-6
  • .menu .cat-item-x – Links to Categories
    • .menu .children
      • .cat-item-r
      • .cat-item-z
        • .children
          • .cat-item-f
          • .cat-item-gh
        • .children
          • .cat-item-v
  • .menu li – Links to Offsite Pages

Sub menu items in the Thesis nav menu

{ 2 comments… read them below or add one }

Dozza December 1, 2010 at 8:34 pm

A true labour of love, being much appreciated here across the pond – exactly the kind of detailed info I was looking for somewhere. Recommended here by Pierre.

(N.B: Continue Reading Links 3.1 & 3.2 above are dead)

Mike August 27, 2012 at 4:06 pm

.submenu-1 is incorrect to control the sub menu tabs. Not working for me at least. it shows the class in firebug as ‘sub-menu’.

Leave a Comment