Thesis Navigation CSS

Thesis navigation menu elements

The CSS for Thesis navigation elements (actually .menu elements) can be understood as falling into 3 broad categories

  1. The shape and structure of the menu.
  2. The general appearance of the menu.
  3. The specific appearance of each menu item

The shape and structure of the menu

The Thesis menu is simply an unordered list with the potential of having nested sublists within it. The CSS associated with this section describes how the unordered list is displayed. It defines the drop down and cascading action of the list and it describes the shape of each element and the spatial relationship between elements. It also defines which elements of the list are visible.

The general appearance of the menu

The Thesis menu by default is styled so that all of the like elements of the menu are displayed in the same way. All of the highest level menu items have the same color, font, hover behavior and width behaviour. Simlarly all of the sub-elements (the drop down elements) of the menu have the same width, same color and hover behavior. The default behavior is that any style changes made to the menu are applied to the entire menu. This is what happens when you modify the menu in the Thesis Design Options dialog.

The specific appearance of each menu item

The Thesis menu provides the opportunity to also change each individual element. Thus each of the highest level menu items could have different colors or different background images. Every menu element can be styled differently from every other menu element. This is because each menu item is given a unique style by Thesis that is blank until your change it.

.menu
{
    position: relative; /* from style.css*/
    list-style: none; /* from style.css*/
    z-index: 50; /* from style.css*/
    border-style: solid; /* from style.css*/
    border-width: 0 0 0.1em 0.1em; /* from layout.css*/
    border-color: #ddd;/* from layout.css [Design Options] */
}
.menu li
{
    position: relative; /* from style.css*/
    float: left; /* from style.css*/
    margin-bottom: -0.1em; /* from layout.css*/
}
.menu li ul
{
    margin-top: -0.1em; /* from layout.css*/
    border-style: solid; /* from style.css*/
    border-width: 0 0 0.1em 0;/* from layout.css*/
    border-color: #ddd;/* from layout.css [Design Options] */
}
.menu li:hover ul
{
    left: -0.1em; /* from layout.css*/
    visibility: visible; /* from style.css*/
}
 

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 comment… read it below or add one }

Matt Nager April 11, 2011 at 3:42 am

Hello. Maybe you can help. I am trying to customize my nav bar to fully extend to the 934px width of the rest of my blog. As of now all the menu pages are aligned left. My hope is to be able to extend the boxes so they are all equally lined up over a 934px width. Does that make sense? You can see what I mean by visiting my site.

Thanks so much!

Matt

Leave a Comment