Fresh Set of CSS-only Menus

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 […]

cssonly

View demoDownload source

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

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 12

Comments are closed.
  1. Pingback: Fresh Set of CSS-only Menus | Codrops Eating

  2. Pingback: uberVU - social comments

  3. 2

    Some of the best styled CSS-only menus I know of on the web. I like the grey one which has this typical typographic look.

  4. 6

    Nice work. I haven’t tested this yet so I could be wrong, but I don’t think you need to put a span tag or a class on the actual link title. You only need a span tag and class on the description from the looks of it.

  5. 7

    Oh and you don’t need the div tag either unless you need to group the list with another element or you need to do some complex positioning. Just a FYI. But I’ve bookmarked this post anyway for future inspiration. Cheers! 🙂

  6. 8

    Great tutorial.

    I was wondering, how would you get an active state on these links?

    I’m having trouble using the

    method

  7. 9

    Hello Mary Lou, I am having difficulty with alignment, it works perfectly in FF, Chrome and Safari but my menu appears offset in i.e – I know I have done something stupid 🙂 but I can’t see what, so any help would really be appreciated
    cheers, thanks again Jeff

  8. 10

    Thank you…I’ve been testing your demos and I think your contribution is great! I really like people who knows a little more than the rest and share their knowledge with the rest! good for you! 🙂

Comments are closed.