Five web 2.0 CSS menu tutorials

Tag

Are you looking for some idea to design a menu in your new web project? Take a look at this nice collection of popular posts on Woork.

This post is a compilation of the most visited posts on my Blog about "web design" topic. It includes five CSS menu tutorials inspired to some Web 2.0 sites with round corners, scriptaculous and ajax effects.

1. Digg-like navigation bar using CSS
This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.

2. Gettyone-like search options menu with Scriptaculous
This tutorial explains how to implement a Gettyone-like search options menu which display a layer with some search options below the input search field, when an user click on the input field to searching for something.

Flickr like horizontal menu
This tutorial explains how to implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu.

3. Simple CSS vertical menu Digg-like
This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu.

4. Tabbed search bar using CSS and Javascript
This tutorial explains how to implement a simple tabbed search bar using CSS and a javascript function which set "active" the selected tab and changes the value of an hidden <input> element to set search options and execute your search only for all items related to the selected topic (for example: web, images, videos...).

Related content
Five basic Ajax tutorials (login, insert record into a database table, search engine, autosuggest and Edit in Places)

Share this post

	Share on Facebook
	Share on Twitter
	Share on StumbleUpon
	Share on Delicious
	Share on Reddit

	Share on Digg
	Share on DesignFloat
	Share on Technorati
	Subscribe to Feeds RSS

Old Comments

Anonymous said...: Great Blog!; February 22, 2008 12:52 AM
Palmetto Equipment and Supply said...: terrific information...just subscribed to your feed...thanks!; February 25, 2008 11:35 AM
pax said...: It would be just great if you could provide a page for each example, so people should know what to expect (and choose) before downloading the tutorials.; February 25, 2008 11:01 PM
Gleb said...: awesome blog.
+1 subscriber; February 26, 2008 2:23 AM
Jermayn said...: Thanks, will bookmark for future use and have no subscribed...; March 4, 2008 7:54 PM
CSS said...: All five are very CSS menus but I liked the last which integrates JavaScript.; June 27, 2008 2:15 AM
Razib Miah said...: thanks.......; August 24, 2008 8:19 AM
pink laptop bags said...: Very nice way of representation - Extremely satisfied. Rare find on net but extremely precious. Keep up the good work.

-Cheers.; August 25, 2008 2:15 AM
DA said...: good tutorials
thx; October 24, 2008 8:35 PM
web design said...: this is definitely an amazing post! thanks for sharing this one. ived been dying to learn how to use CSS and this post helped a lot. thanks for sharing this one out.; February 5, 2009 8:37 PM
Ajans said...: Thanks you too much, this is wonderful.; February 7, 2009 3:50 PM
pipiet said...: it's awesome... i'm waiting for other tutorials... thanks very much; February 22, 2009 9:23 PM
cephe kaplama said...: This is gerta.Thanks a lot.; March 31, 2009 6:07 AM
Güvenlik said...: great blog; April 10, 2009 9:19 AM
mario oyunları said...: thanks for post; April 12, 2009 4:47 AM
oyun said...: Thanks nice.; May 9, 2009 1:16 PM
neon said...: information is very clear. good and understandable explanation. super-topics. Thank you for sharing a very nice web site.; May 28, 2009 2:38 PM