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.
Thick Underline Menu
This horizontal CSS menu goes with a minimalist approach, by applying just a thick border underneath each link to give it style. It supports easy centering (or right aligning) on the page, just by changing the text-align property in the CSS. No images are used, just good old code.
jQuery Multi Level CSS Menu #2
This is a multi-level horizontal CSS menu created using a regular nested HTML list, then turned into a fully functional drop down menu using CSS and a touch of jQuery. The sub menus slide in and out into view.
Uber Round Color Tabs
Uber Round Color Tabs is a solid colored CSS menu with tabs that are well rounded on each side. Thanks to two transparent gifs used to create the corners, the tabs can be customized to any desired color using CSS color values alone.
jQuery Multi Level CSS Menu #1
This is a multi-level horizontal CSS menu created using a regular nested HTML list only as far as markup, then transformed into a fully functional drop down menu using CSS and a touch of jQuery.
Wire Frame Aura Menu
This is a clean looking CSS menu with simply a gray border outlining its edges. To add a little flare, an "aura" effect is added when the mouse moves over the menu items, realized using a gradient ellipse image. This menu supports easy alignment other than "left", such as "center" or "right" instead.
Matt Black Tabs
There's often beauty in simplicity. Matt Black Tabs is a clean CSS list menu that uses no images, and very small in footprint. Each tab is floated left to achieve its look and all contained in a wrapper that negate the need to manually clear "float" for the contents that immediately follow.
Vista Aero Buttons Menu
This menu consists of a row of independent, Vista aero looking CSS buttons, and departs from the typical list based menu structure. Each button appears initially faded out slightly via CSS opacity, then brought back to full opacity during the "hover" state.