Thursday, 21 February 2008

Five web 2.0 CSS menu tutorials

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)

No comments:

Post a Comment