CSS Library Horizontal CSS Menus
Welcome to Dynamic Drive's new CSS library! Here you'll find original, practical CSS codes and examples such as CSS menus to give your site a visual boast.
CF Navigation Menu II
This is an inverted version of the original CF Navigation Menu. Four images are used as part of its interface- the two round corners, an indented divider between menu links, and a gradient background image spanning the menu.
Sliding Doors Tabs Menu
This is a two state rollover image tabs menu based on the popular sliding doors technique. It uses two images, a right and left tab that shifts up and down as the mouse moves over a tab, to create a highlight effect.
Chrome Menu Bar
This is a lightweight "chrome" looking CSS menu bar. The menu uses two variants of the same background image to create the hover effect, and each menu items can easily be set to either align "left", "center", or "right" on the page, just by changing the "text-align" attribute.
CSS Tabs menu
This is a basic CSS tabs menu, created from an ordinary HTML list. The menu supports two common requests- the ability to align the menu "left", "center", or "right" on the page, plus highlight a particular tab so it appears selected.
Two level CSS Tabs menu
Building on a regular CSS Tabs Menu, this CSS menu supports second level content that can be associated with specific tabs. By giving both a tab and the desired sub content a class of "selected", the sub content becomes visible on the page.
Underline Horizontal Menu
This is a sleek CSS horizontal menu with a popular "underline" effect shown whenever the mouse rolls over a link. Each link (<a>) also carries a background image, used to as the indented line graphic that separates each menu item.
Bevel horizontal Menu
This CSS code creates a "3 state" horizontal menu out of an ordinary list. When the mouse moves over the menu, the menu item bevels up, and in modern browsers, depressing on the menu also creates a depressed state.