CSS: How to Create a Staggered Menu Layout

In this tutorial we will learn how to create a staggered menu using only CSS.

Sometimes we want to break up the structure of a website to give it character and staggering a menu up and done or left and right is one possible way to do this. Usually this is done with images and CSS which is not very flexible. If we want to change a menu item we have to change out the images by hand, and all the images are place individually. Now lets look at a way to stagger a text menu up and down using only CSS and HTML. No images, And our menu should look like this when finished.Image may be NSFW.
Clik here to view.

How to Create a Staggered Menu in CSS

First of as always we will start off with the HTML. It is going to look exactly the same as any other HTML/CSS menu we have ever created.

<div id="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

As you can see nothing has changed here at all. So lets move on to the CSS. Lets start with our normal CSS styling for our menu.

#menu {
  height: 40px;
  width: 982px;
  padding-right: 10px;
  padding-left: 10px;
}
#menu ul {
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px;
  margin-top: 0px;
  padding-top: 0px;
}
#menu ul li {
  display: inline;
  margin-right: 5px;
  margin-left: 5px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 18px;
  line-height: 40px;
  border: 1px solid #333;
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px 1px #333;
  background-color: #09C;
}
#menu ul li a {
  color: #000;
  text-decoration: none;
}

As you can see again there is nothing new here. Everything is the same as any other Horizontal Menu we have ever created.

Now as we want our Menu items to move up slightly and to stagger on every second item by 10px we now need to  work with a CSS selector that is overlooked by many designers. The nth-of-type() selector.

This is what our additional code looks like:

#menu li:nth-of-type(odd)
{
  position: relative;
  z-index: 1;
  top: -25px;
}
#menu li:nth-of-type(even)
{
  position: relative;
  z-index: 1;
  top: -15px;
}

Because we are able to select all the odd numbered list items and even list items and process them differently we can now staggered them and keep a little structure whilst still breaking it up slightly.

Again we have found a simple elegant solution using pure CSS. Hope to see you next time.