Codrops

Fresh Set of CSS-only Menus

Web Design January 31, 2010 by Mary Lou 3 Comments

Here is a set of fresh CSS-only menus for your website – no images, no JavaScript. The markup for the menus is always the same and I used 12 different stylesheets for their appearance. The main idea is to have a big title link and some description under the link. The description can be hidden with visibility:hidden and then shown when hovering over the link element. Title and description are inside of spans and can be styled accordingly.

The markup looks like this:

<div id="menu1">
	<ul>
		<li><a href="">
				<span class="title">About</span>
				<span class="text">Who we are</span>
			</a>
		</li>
		<li><a href="">
				<span class="title">Portfolio</span>
				<span class="text">What we do</span>
			</a>
		</li>
		<li><a href="">
				<span class="title">Blog</span>
				<span class="text">What we talk about</span>
			</a>
		</li>
		<li><a href="">
				<span class="title">Contact</span>
				<span class="text">How to get in touch</span>
			</a>
		</li>
	</ul>
</div>

Enjoy!

View demoDownload source

Tagged with: CSS, menu, Navigation