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.
CSS3 Semi Opaque Menu
This menu takes advantage of CSS3 gradient background to produce a menu with a semi opaque rollover effect. Whatever the solid background color of the main UL behind it, the menu item's background peeks through. Peek-a-boo!
CSS Clay Bricks Menu
This rustic looking horizontal CSS menu utilizes CSS3 gradient backgrounds and box shadows to add progressive visual appeal while still maintaining its minimalist look. The menu uses no CSS floats and hence can be easily left, center, or right aligned.
Clean Arrow Underline Menu
This menu uses the nifty "CSS Triangles technique" to create a clean horizontal UL menu with a thick arrow border applied to the currently active menu item. It uses no images nor any extranous markup to accomplish the effect,
CSS Circle Menu
This CSS example uses CSS3's
border-radius property that's set to a very large value to create circle menu links.
CSS3 Gradient Menu Buttons
These fancy looking buttons brings together CSS3's
box-shadow, and linear gradients to create glossy looking menu buttons that use NO images.
jQuery Drop Line Tabs
This menu turns a nested UL list into a horizontal drop line tabs menu. The top level tabs have rounded corners thanks to the use of two transparent background images
jQuery Drop Line Menu
This menu turns a nested UL list into a horizontal drop line menu, with each sub menu appearing as a single row of links beneath its parent menu. To polish it up, the menu uses a touch of jQuery magic to apply a nice slide down effect to each sub menu as it is revealed.