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.
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.
Animated horizontal tabs
These sliding doors based blue tinted tabs "jump up" when selected, such as when the mouse rolls over each one. This is accomplished using a combination of relative positioning and padding on each tab. The result are tabs that animate without any scripting.
Glossy Horizontal Menu
A nicely curved, glossy looking horizontal menu. Three images are used to create the interface- an underlining repeating gradient image, plus left and right parts of a sliced tab image for the selected tab.
CSS Indent Menu
Using two gradient background images, this horizontal CSS menu makes the active/ selected menu item appear indented. The width of the menu is set to 80% of its container in the demo .The entire menu markup plus images combined comes in at a very lean 2.5kb.
Inverted Shift Down Menu II
This inverted horizontal menu creates tabs where the active tab is both longer and its text offset downwards compared to its less active counterparts. It does this by manipulating the tab's top/bottom padding values plus the color of its bottom border.
Inverted Shift Down Menu
This clean CSS horizontal menu contains tabs with text that shift downwards slightly when the mouse rolls over it. And just for demonstration, it shows how to make the bottom corners of each tab rounded using CSS3 and Mozilla's proprietary declarations for rounded corners.