Website Building Tools > Navigation > Horizonal CSS Menu with Tabs

Author: Dynamic Drive > Download Horizontal Tabbed Menu

This Horizontal Tabbed Menu has a nice glossy look. Three images are used to create the interface. The author (Santosh) kindly provides five different color schemes foryur to choose from. This menu works in IE6, IE7 and Firefox 1.5 - but it seems that it should work in Opera 9, and IE7 RC1 and Safari.

NOTE: I had aproblem getting the code to work, so I copied it from the actual demo page. You can have this same copy - it is at the bottom of the page.

as of 2-5-2008

• Home
• CSS
• Forums
• Webmaster Tools
• JavaScript
• Gallery

• Home
• CSS
• Forums
• Webmaster Tools
• JavaScript
• Gallery

• Home
• CSS
• Forums
• Webmaster Tools
• JavaScript
• Gallery

• Home
• CSS
• Forums
• Webmaster Tools
• JavaScript
• Gallery

• Home
• CSS
• Forums
• Webmaster Tools
• JavaScript
• Gallery

CSS CODE:

<style> /*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */ /*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */ .glossymenu{ position: relative; padding: 0 0 0 34px; margin: 0 auto 0 auto; background: url(images/menur_bg.gif) repeat-x; /*tab background image path*/ height: 46px; list-style: none; } .glossymenu li{ float:left; } .glossymenu li a{ float: left; display: block; color:#000; text-decoration: none; font-family: sans-serif; font-size: 13px; font-weight: bold; padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/ height: 46px; line-height: 46px; text-align: center; cursor: pointer; } .glossymenu li a b{ float: left; display: block; padding: 0 24px 0 8px; /*Padding of menu items*/ } .glossymenu li.current a, .glossymenu li a:hover{ color: #fff; background: url(images/menur_hover_left.gif) no-repeat; /*left tab image path*/ background-position: left; } .glossymenu li.current a b, .glossymenu li a:hover b{ color: #fff; background: url(images/menur_hover_right.gif) no-repeat right top; /*right tab image path*/ } .blue{ background: url(images/menub_bg.gif) repeat-x; /*tab background image path*/ } .blue li.current a, .blue li a:hover{ background: url(images/menub_hover_left.gif) no-repeat; /*left tab image path*/ } .blue li.current a b, .blue li a:hover b{ background: url(images/menub_hover_right.gif) no-repeat right top; /*right tab image path*/ } .green{ background: url(images/menug_bg.gif) repeat-x; /*tab background image path*/ } .green li.current a, .green li a:hover{ background: url(images/menug_hover_left.gif) no-repeat; /*left tab image path*/ } .green li.current a b, .green li a:hover b{ background: url(images/menug_hover_right.gif) no-repeat right top; /*right tab image path*/ } .orange{ background: url(images/menuo_bg.gif) repeat-x; /*tab background image path*/ } .orange li.current a, .orange li a:hover{ background: url(images/menuo_hover_left.gif) no-repeat; /*left tab image path*/ } .orange li.current a b, .orange li a:hover b{ background: url(images/menuo_hover_right.gif) no-repeat right top; /*right tab image path*/ } .purple{ background: url(images/menupu_bg.gif) repeat-x; /*tab background image path*/ } .purple li.current a, .purple li a:hover{ background: url(images/menupu_hover_left.gif) no-repeat; /*left tab image path*/ } .purple li.current a b, .purple li a:hover b{ background: url(images/menupu_hover_right.gif) no-repeat right top; /*right tab image path*/ } </style>

HTML CODE:

<ul class="glossymenu"> <li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li> <li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li> <li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li> <li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li> <li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li> <li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li> </ul> <br /> <ul class="glossymenu blue"> <li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li> <li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li> <li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li> <li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li> <li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li> <li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li> </ul> <br /> <ul class="glossymenu green"> <li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li> <li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li> <li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li> <li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li> <li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li> <li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li> </ul> <br /> <ul class="glossymenu orange"> <li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li> <li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li> <li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li> <li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li> <li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li> <li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li> </ul> <br /> <ul class="glossymenu purple"> <li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li> <li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li> <li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li> <li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li> <li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li> <li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li> </ul>

Pick up your copy of this great menu.

Author: Dynamic Drive > Download Horizontal Tabbed Menu