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.
When Finished our menu will look something like this.
When a menu item with no sub-menu is hovered the hyperlink will turn a deep red but the overall menu remains the same. If a menu item with a sub-menu is hovered than the menu increases in length to show the hidden menu items. As you can see from the image above it will expand dependant on how many items are actually in the sub-menu.
In 2 of my previous articles I covered how to create a vertical accordion menu using only CSS. In this tutorial I will be showing how to turn that around and create a horizontal accordion menu. So if you are not yet familiar with the basics of the accordion menu check out the HTML and CSS for the vertical accordion menu which we will be converting in this tutorial at the above two links.
We will create a vertical Accordion Menu in this tutorial and in the next article we will show you how to convert it to a horizontal menu using the same HTML code we used in the last article. Continue reading
For a simpler version of the CSS Accordion Menu please visit here.