Creating menus with CSS and the awesome z-index

One of the cool things that is working across most recent browsers is CSS menu techniques.  One reason I really like this technique is anyone who can learn CSS can create pretty nice looking menus and applications which can be transformed by changing the CSS – great for themes!

If you really want to try this out, the best thing to do is use this site to generate the code for you and then see how its created.  The site has a bunch of themes and colors you can choose from.

I created a site that uses the JQuery layout plugin and I wanted a drop-down menu in the top layer of the layout.  I really wanted to have the menu created with CSS but because I used the JQuery layout plugin some issues came up.

The problem:

The JQuery Layout plugin lets you set up configurable panels (ones that can close, pin, minimize, etc) that can be laid out and even embedded inside each other.  The primary approach is a North, South, East, West and Content pane layout.  I used a very basic layout in my application.  Since I wanted to have a CSS menu navigation in the North panel, the menu would actually display over the West, Center, and possibly East panels.  The CSS did display correctly but the content in the lower panels was showing through dropped down menu options!

The solution:

In case you are not familiar with CSS menus, I will give a quick primer.  The easiest way to construct the menu is to use an HTML list for the menu content:

<ul id="navigation">
    <li><a href="/">Home</a>
         <ul>
              <li><a href="/math">Math</a></li>
              <li><a href="/science">Science</a></li>
              <li><a href="/gym">Gym</a></li>
              <li><a href="/ss">Social Studies</a></li>
              <li><a href="/spanish">Spanish</a></li>
         </ul>
    </li>
    <li><a href="/profile">Profile</a></li>
    <li><a href="/contact">Contact</a></li>
<ul>

Notice the menu contains a top level list and one top level entry has a sub menu list.  This means when the user mouses over the top level entryt “Home” the sub menu with Math, Science, Gym, Social Studies and Spanish will be shown.

The key combination in the CSS is the display:none and the display:block.  The following CSS is for any UL element under the element with the id of “navigation”.  This tells the browser to not show the referenced element, ie.  the sub UL list.

#navigation ul {
    display: none;
    ....
}

The next would be to put a hover declaration for the LI elements and “block” the child UL elements.  This tells the browser to show the element when its parent is hovered on:

#navigation li:hover > ul {
   display: block;
   z-index:10;
   ....
}

Notice anything strange in the last bit of code?  Yep, the z-index is what solved my overlay problem.  Because of the JQuery layout and how it uses overlays, cutoffs, etc, the z-index allows me to specify that this element should be “on top” of all other elements.  The key is to make it a value that is greater than all other z-index values on the page.  This little gem comes in handy with CSS based layouts and animations.

8 thoughts on “Creating menus with CSS and the awesome z-index

  1. Pingback: HTML Scripts Tips and Secrets » Blog Archive » Creating menus with CSS and the awesome z-index » Balfes.net

  2. Pingback: HTML Scripts Tips and Secrets » Blog Archive » Creating menus with CSS and the awesome z-index » Balfes.net

  3. Pingback: xhtml css templates – Creating menus with CSS and the awesome z-index » Balfes.net | XHTML CSS - Style sheet and html programming tutorial and guides

  4. Pingback: Creating menus with CSS and the awesome z-index » Balfes.net » Web Coding Unravelled

  5. Pingback: Creating menus with CSS and the awesome z-index » Balfes.net : : css

  6. Pingback: Creating menus with CSS and the awesome z-index » Balfes.net

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s