The Structure of the Thesis .menu


The shape and structure of .menu elements

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 describes which elements of the list are visible

The shape & structure of .menu

  • .menu (ul.menu)
    • .menu li
      • .menu li ul
        • .menu li:hover ul
    • .menu ul
      • .menu ul li
      • .menu ul ul
        • .menu :hover ul ul
        • .menu :hover ul :hover ul
      • .menu ul ul ul (not defined but implicit)
        • .menu :hover ul :hover ul ul
        • .menu :hover ul :hover ul :hover ul
.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*/
        }
         

In this illustration the li elements are shaded and the ul elements have a box around them

.menu is the anchor for the entire menu. By default it gets a border on the bottom and left side whose width is defined here, but whose color is defined in the Thesis Design Options dialog. This is where you would apply a background color to fill the menu bar beyond the main menu items.

.menu li are the main menu items. These are the menu items that are always visible on the menu bar. The width property isn’t set for these so they expand or contract to fit the name. This is where you would set a width and text alighnment if you wanted uniform tab widths.

. menu ul defines the submenu list. It hides the list (until :hover), it gives it a z-index to bring it infront of the content below and it fixes the width at 15 em. The result of this fixed width is that the submenu items are all the same width and are generally different in width from the .menu li items.

.menu ul li sets the width of the list items within the submenu to be the same as the width of the submenu.

.menu ul ul moves the sub submenu to the left the width of the menu item it is a submenu of. Were this set to 20 em there would be a 5 em gap between the submenu item and its sub submenu item. It is set to slightly smaller than the actual width of the submenu item to eliminate any potential gap caused by browser issues.

.menu :hover ul ul and the rest all make the submenus visible when the cursor hovers over their predecessor.

.menu ul
            {
                position: absolute; /* from style.css*/
                visibility: hidden;  /*from style.css*/
                list-style: none; /* from style.css*/
                z-index: 110; /* from style.css*/
                width: 15em; /* from layout.css*/
            }
            .menu ul li
            {
                clear: both; /* from style.css*/
                width: 15em; /* from layout.css*/
            }
            .menu ul ul
            {
                position: absolute; /* from style.css*/
                top: 0; /* from style.css*/
                margin-top: 0; /* from layout.css*/
                left: 14.9em;  /*from layout.css*/
            }
            .menu :hover ul ul
            {
                visibility: hidden;  /*from style.css*/
            }
            .menu :hover ul :hover ul
            {
                left: 14.9em;  /*from layout.css*/
                visibility: visible; /* from style.css*/
            }
            .menu :hover ul :hover ul ul
            {
                visibility: hidden; /* from style.css*/
            }
            .menu :hover ul :hover ul :hover ul
            {
                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 }

Clint July 14, 2011 at 1:37 am

Awesome….I love your illustration.. I’m searching for menu customization and you came out.. how about the .current? should it be there? I’m still learning thesis… it’s awesome theme indeed! Thanks for clearing this Anatomy of the Menu..it helped me a lot on organizing the custom code, because I guess, I’m already lost to many custom codes I put up in my site.. lol..

Leave a Comment