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:29:43am
 
CSS Accordion menu



More styles for the CSS accordion menu

Honestly, the example menu is pretty plain. You'll be glad to hear though; spicing up the CSS accordion menu with some extra styles is pretty straight forward! Have a look at this lovely (but still simple) Green accordion menu:

Doesn't that look a lot better? Achieving this appearance only took a bit of extra CSS, and doesn't actually require any changes to the HTML code! Below is the HTML code (for those who don't want to click back to the previous page):

<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>
    <li><a href="#">Header 4</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>

Now, here's where the magic happens... the CSS for this menu is as follows:

.accordion-menu li { width:150px; }
.accordion-menu a {
	display:block;
	width:148px;
	padding:2px;
	background:#aaddaa;
	border:1px solid #99aa99;
	border-radius:3px;
	margin:1px;
	text-decoration:none;
	color:#337733;
	font-weight:bold;
}
.accordion-menu ul a {
	text-indent:10px;
	background:#ddffdd;
	color:#77aa77;
}
.accordion-menu ul a:hover {
	color:#fff;
	background:#339933;
}
.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; }

That's it! Nothing more to it - just put the HTML code in the page body, and the CSS in a seperate stylesheet (or style element), and you can use this menu on your own pages!