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:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

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.