Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Glowing Tabs Menu

Author: Dynamic Drive

Glowing Tabs Menu uses a background image that accentuates the outline of the tabs. And to jazz it up, the selected tab "glows", by using the "Sliding Doors" technique to shift the original background image upwards to reveal the glowing version of the tab design. An exquisite yet professional looking horizontal menu.

Demo:

The two image used:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 04/21/2007

Revision History: Jan 5th, 09"- Removed need for IE7 spacing hack.

Usage Terms: Click here

Your Comments (42)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 5 pages  1 2 3 >  Last »

Wow, these are cool! Love the mouseover effects, thanks again DD!
Posted by Callum Haywood on 04/21, 04:06 AM
Isn't this just the sliding doors effect published over at ALA ages ago with another hover effect?
Posted by Fredrik Wärnsberg on 04/22, 05:59 PM
Hi Fredrik:
Well yes it is, as it says in the description. :)
Posted by ddadmin on 04/22, 11:51 PM
this is very good css.
Posted by eyeglasses on 04/24, 07:59 AM
I'm confused, why is using sliding doors to move the image better than just doing a simple image swap on hover?
Posted by Paul on 04/29, 07:56 AM
@ Paul

it is better, because there isn't a delay on the mouseover as the reader hovers over the link, and the browser has to load a second image, the bg image is already loaded completely, therefore making for smooth transitions across all connection speeds and browsers. Without the need for a js image preload.
Posted by Quentin on 04/30, 10:31 PM
Must say, thank you.
I was using a preload image script. This removed that anoying script and 2 files for every tab.

Cheers.
Posted by Pen on 05/03, 10:04 AM
I really like that one. I appreciate your work!
Posted by Tyrone on 05/09, 07:26 AM
I'm doing a webpage and need a mouse over for a
different effect. This looks like something I'm
looking me.
Regards
Dennis
Posted by Dennis Peake on 05/09, 04:54 PM
How do you centre this menu bar? What code do you use for an external style sheet?
Posted by Cate on 05/24, 12:01 AM

Comment Pages 1 of 5 pages  1 2 3 >  Last »

Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.