CSSRockstars

Archive for the ‘Menu & Navigation’ Category

Tabbed content areas are a popular solution for the "lots of content - few space" problem.

Nettuts, a great tutorial website about web design & development has a nice example of creating a tabbed content area with jQuery & CSS.

JavaScript Tab Content

When clicked to the tabs, content area switches to the new content with a slick accordion type effect.

Besides getting the ready to use codes from the tutorial, you can see how every step of the project is completed.

Here is the final demo of this tabbed content area.

Dock menus are very handy when it comes to limited space in designs. They just appear when needed and this idea expands the website area so much.

Webber 2.0 Dock Menu is a nice JavaScript docking menu which is easy to implement and does not require any JavaScript frameworks.

Dock Menu

It is built with the Philippe Maegerman’s tween class. The logic of the menu is very simple:  an empty div which determines the mouseover area for the docking effect and that’s it. Simple but very functional.

ADxMenu is a JavaScript and CSS drop-down menu solution which web designers will find easy to modify.

It supports unlimited sub-menus and offers a simplified usage as it uses the well-known <ul> <li> tags to create the menus rather than JavaScript configurations (JavaScript editing can be done for extra modification).

Drop Down Menu Script

ADxMenu works in most of the modern browsers (an extra solution exists for IE6) and supports both horizontal & vertical menu types, even right-to-left and bottom-to-top.

woork, a blog that has some very nice web resources, shows how to create the famous digg-like navigation with a tutorial & source files.

CSS Digg Menu

The tutorial also explains how to create liquid & rounded corner items that you may find useful.

Liquid Round Corner CSS

feed-holder
FeedBurner
  • Gooey Templates
  • Krop
  • slice'n dice
  • Website Magazine
  • DNS Pinger
  • Advertise Here