The General Appearance of the Thesis Menu

General nav menu appearance

The general appearance of the menu

Each item of the menu is a link to some resource on or off the site. In Thesis the general menu-wide appearance is defined by the link element a. Each menu item is further defined by its “location”. By default the appearance of a menu item in Thesis is dependent on whether or not:

  1. It links to some other page (default behaviour)
  2. It links to the current page,
  3. It links to the parent of the current page, or

Thesis also provides by default a different style for the menu item when the cursor is hovering over that particular item.

It links to a different page

.menu a is the basic default styling for every menu item. This only gets changed when it links to the current page, it links to the parent of the current page or it is hovered over. The border, background and font colors are set in the Thesis Design Options dialog.

.menu a
{
    text-transform: uppercase; /* from style.css*/
    letter-spacing: 2px; /* from style.css*/
    display: block; /* from style.css*/
    border-style: solid; /* from style.css*/
    font-size: 1.1em; /* from layout.css*/
    line-height: 1.273em; /* from layout.css*/
    padding: 0.636em 0.818em; /* from layout.css*/
    border-width: 0.091em; /* from layout.css*/
    border-left-width: 0; /* from layout.css*/
    border-color: #ddd;/* from layout.css [Design Options] */
    color: #111;/* from layout.css [Design Options] */
    background: #efefef;/* from layout.css [Design Options] */
}
.menu a:hover
{
    color: #111;/* from layout.css [Design Options] */
    background: #ddd;/* from layout.css [Design Options] */
}
.menu a:hover ul
{
    left: -0.1em; /* from layout.css*/
    visibility: visible; /* from style.css*/
}
.menu ul a
{
   /* width: 11.818em;  from layout.css*/
    border-left-width: 0.091em; /* from layout.css*/
}

Parent elements of the Thesis Nav Menu

It links to the current page

.menu .current a is the default styling for a menu item that links to a current page. The background and text colors are set in the Thesis Design Options dialog.

.menu .current ul a is the styling for the submenu of the current page. These colors are also set by the same design options as .menu .current ul a.

.menu .current ul a:hover is the hover style of the current page link. The background and text colors are set in the Thesis Design Options dialog.

.menu .current-cat a and all of the rest of styles with .current-cat behave in the same fashion their .menu .current counter parts except that they only apply to category items in the menu. This category specific styling only applies to items that link to the current page. These colors are also set by the same design options as .menu .current ul a.

It links to the parent page

.menu .current-parent > a is the styling for a menu item that links to the parent page of the current page. The background and text colors are set in the Thesis Design Options dialog.

.menu .current-parent a:hover is the hover style for a menu item that links to the parent page of the current page. The background and text colors are set in the Thesis Design Options dialog.

.menu .current-cat-parent > a is the styling for a menu item that links to the category parent page of the current category page. The background and text colors are set in the Thesis Design Options dialog.

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
.menu .current a
{
    color: #111;/* from layout.css [Design Options] */
    background: #fff;/* from layout.css [Design Options] */
}
.menu .current a:hover
{
    color: #111;/* from layout.css [Design Options] */
    background: #fff;/* from layout.css [Design Options] */
}
.menu .current > a
{
    cursor: text; /* from style.css*/
    border-bottom-color: #fff;/* from layout.css [Design Options] */
}
.menu .current ul a
{
    border-bottom-color: #ddd;/* from layout.css [Design Options] */
    color: #111;/* from layout.css [Design Options] */
    background: #efefef;/* from layout.css [Design Options] */
}
.menu .current ul a:hover
{
    color: #111;/* from layout.css [Design Options] */
    background: #ddd;/* from layout.css [Design Options] */
}
 .menu ul .current a
{
    border-bottom-color: #ddd;/* from layout.css [Design Options] */
}

.menu .current-cat a
{
    color: #111;/* from layout.css [Design Options] */
    background: #fff;/* from layout.css [Design Options] */
}
.menu .current-cat a:hover
{
    color: #111;/* from layout.css [Design Options] */
    background: #fff;/* from layout.css [Design Options] */
}
.menu .current-cat > a
{
    cursor: text; /* from style.css*/
    border-bottom-color: #fff;/* from layout.css [Design Options] */
}
.menu .current-cat ul a
{
    border-bottom-color: #ddd;/* from layout.css [Design Options] */
    color: #111;/* from layout.css [Design Options] */
    background: #efefef;/* from layout.css [Design Options] */
}
.menu .current-cat ul a:hover
{
    color: #111;/* from layout.css [Design Options] */
    background: #ddd;/* from layout.css [Design Options] */
}
 .menu ul .current-cat a
{
    border-bottom-color: #ddd;/* from layout.css [Design Options] */
}
.menu .current-parent > a
{
    color: #111;/* from layout.css [Design Options] */
    background: #f0eec2;/* from layout.css [Design Options] */
}
.menu .current-parent a:hover
{
    color: #111;/* from layout.css [Design Options] */
    background: #ddd;/* from layout.css [Design Options] */
}
.menu .current-cat-parent > a
{
    color: #111;/* from layout.css [Design Options] */
    background: #f0eec2;/* from layout.css [Design Options] */
} 

{ 1 comment… read it below or add one }

Maria December 6, 2010 at 4:21 pm

I am a Thesis newbie and this is really helpful. Just a question though…how long can the menu continue – in other words, is there a limit to the number of Sub Sub Sub pages and are there Sub Sub Sub Sub pages?

Thanks.

Leave a Comment