Run your own MMO
Run your own Strategy MMO! Easy to customize, addictive, and great for building a community of regular visitors!

 

CSS Accordion menu

In Category Navigation
Article published 29/06/2012 11:27:50am
 
CSS Accordion menuCSS Accordion menu

Love accordion menus, but don't want to resort to using Javascript? This CSS only Accordion menu allows you to add the Accordion style navigation effect to your website using only HTML and CSS!



Creating a CSS-only accordion menu is a surprisingly simple affair - it takes only a very small amount of CSS and HTML to accomplish, and provides a simple, intuitive website navigation system, that also causes no problems for search engine "Spiders", meaning it's a plus for SEO!

Example of the CSS accordion menu

HTML for the CSS accordion menu

We'll assume you have at least a basic working knowledge of HTML and CSS. The HTML for the accordion menu itself is very straight forward - we use some nested Unordered Lists, and Anchors for each of the menu headers and items (whilst you don't have to use these elements, we'll use them in this example as it's designed for navigation!).

<ul class="accordion-menu">
    <li><a href="#">Header 1</a>
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
        </ul></li>
    <li><a href="#">Header 2</a>
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
        </ul></li>
    <li><a href="#">Header 3</a>
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
        </ul></li>
</ul>

You'll notice we have one top-level unordered list with the class "accordion-menu"; this is the class we use to apply styles to this menu. The child "li" (list item) elements are considered the menu "headers". Each of these top-level "li" items has a child unordered-list with its own "li" elements, which can be considered the menus under each header item.

CSS Code for our Accordion Menu

We also need some CSS for our Accordion menu to work. First of all, we'll show you all the CSS together:

.accordion-menu a {
    display:block;
    width:150px;
    background:#ccc;
}
.accordion-menu, .accordion-menu ul {
    padding:0;
    margin:0;
}
.accordion-menu li {
    list-style:none;
}

.accordion-menu li ul { display:none; }
.accordion-menu li:hover ul { display:block; }

Now, let's break this code down...

We have several elements styles here; first of all the Anchor elements we are using in the accordion menu for both headers and menu items:

.accordion-menu a {
    display:block;
    width:150px;
    background:#ccc;
}

We apply the dimensions we want menu items and headers to take to the anchor elements, not the list item elements (in this case the width, and the display:block; allows the width to be applied to what is normally an inline element); this means that each menu item or headers "hit-box" (the area that can be clicked by the mouse) is them full size of the menu item, so as not to cause confusion for visitors. We also apply a boring grey background just to show you how large we've made each menu item.

Next, we remove the padding and margin from the unordered lists (both top-level and sub-menu) that make up this navigation:

..accordion-menu, .accordion-menu ul {
    padding:0;
    margin:0;
}

This is to prevent unpleasant indentation of the sub-menus, as unordered-list elements have a left-padding and margin by default.

Now we remove the bullet-points that show up by default on the side of unordered-list menu items:

.accordion-menu li {
    list-style:none;
}

...and finally we add some nifty CSS that causes the sub-menu to become visible when a top-level "li" element is "hovered" over by the visitors mouse:

.accordion-menu li ul { display:none; }
.accordion-menu li:hover ul { display:block; }

This means that sub-menu "ul" elements are not displayed (display:none;) by default, but when a top-level "li" element has a mouse pointer over it (li:hover) they are displayed as a block element (display:block;).