[CSS] How do I achieve this effect?

[heffer86]

I have the this menu on my site: http://www.stunicholls.com/menu/pro_dropdown_2.html. I am wondering how they achieve the effect when you hover and the Background image will dynamically change width depending on the length of the text.

[primexx]

what are you talking about? I don't see anything that does what you're describing. CSS isn't capable of dynamic changes anyways.

[BGM]

I have the this menu on my site: http://www.stunicholls.com/menu/pro_dropdown_2.html. I am wondering how they achieve the effect when you hover and the Background image will dynamically change width depending on the length of the text.

javascript :)

[GreenMartian]

I don't think he meant the menu and all the javascript involved. Just the background-changing during hover.

It goes somewhere along these lines.. (gross oversimplification from the original CSS on the site, but you should get the idea)

a { padding-left: 12px; }
a span { padding-right:12px; }
a:hover { background: url('bg.jpg') top left; }
a:hover span { background: url('bg.jpg') top right; }

<a href="something"><span>Hi There</span></a>

This image might help a bit:

[Kudos Veteran]

I don't think he meant the menu and all the javascript involved. Just the background-changing during hover.

It goes somewhere along these lines.. (gross oversimplification from the original CSS on the site, but you should get the idea)

a { padding-left: 12px; }
a span { padding-right:12px; }
a:hover { background: url('bg.jpg') top left; }
a:hover span { background: url('bg.jpg') top right; }

<a href="something"><span>Hi There</span></a>

This image might help a bit:

(Y) Great answer!

[rson451]

(Y) Great answer!

Agreed. Very nice GreenMartian.

[briley]

There's a pretty good article about this (called the "sliding doors technique") at A List Apart:

http://www.alistapart.com/articles/slidingdoors/

[rson451]

There's a pretty good article about this (called the "sliding doors technique") at A List Apart:

http://www.alistapart.com/articles/slidingdoors/

Very similar, but not quite the same. That technique uses two images where the above mentioned one uses only one larger image. Same idea though :)

[heffer86]

I don't think he meant the menu and all the javascript involved. Just the background-changing during hover.

It goes somewhere along these lines.. (gross oversimplification from the original CSS on the site, but you should get the idea)

a { padding-left: 12px; }
a span { padding-right:12px; }
a:hover { background: url('bg.jpg') top left; }
a:hover span { background: url('bg.jpg') top right; }

<a href="something"><span>Hi There</span></a>

This image might help a bit:

Thanks! That is a very good explanation of the effect I am trying to achieve.

[Kami-]

Some great answers here :)

[heffer86]

I implemented the sliding door effect. It is working great except the hover don't work right yet. The right corner is rounded, but the left one isn't. Any ideas?

My html markup is:

<div id="headerTabs">
<ul>
<li><a href="#>Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Products</a></li>
</ul>
</div>

CSS

#headerTabs {
	background-image:url(bg_tabs.gif);
	Z-INDEX: 10;
	BORDER-BOTTOM: 0px;
	POSITION: relative;
	BORDER-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	PADDING-LEFT: 20px;
	WIDTH: 967px;
	PADDING-RIGHT: 0px;
	HEIGHT: 22px;
	MARGIN-LEFT: auto;
	BORDER-TOP: 0px;
	TOP: -44px;
	MARGIN-RIGHT: auto;
	BORDER-RIGHT: 0px;
	PADDING-TOP: 0px
}
#headerTabs UL {
	BORDER-BOTTOM: 0px;
	BORDER-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	WIDTH: 987px;
	PADDING-RIGHT: 0px;
	BORDER-TOP: 0px;
	BORDER-RIGHT: 0px;
	PADDING-TOP: 0px
}
#headerTabs LI {
	BORDER-BOTTOM: 0px;
	BORDER-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px 0px 1px;
	PADDING-LEFT: 0px;
	/*WIDTH: 83px;*/
	PADDING-RIGHT: 0px;
	DISPLAY: block;
	BACKGROUND: url(tab_right.gif) #333 no-repeat right top;
	FLOAT: left;
	FONT-SIZE: 18px;
	BORDER-TOP: 0px;
	BORDER-RIGHT: 0px;
	PADDING-TOP: 0px
}

#headerTabs LI:hover {
	BORDER-BOTTOM: 0px;
	BORDER-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px 0px 1px;
	PADDING-LEFT: 0px;
	/*WIDTH: 83px;*/
	PADDING-RIGHT: 0px;
	DISPLAY: block;
	BACKGROUND: url(tab_left_hov.gif) #333 no-repeat left top;
	FLOAT: left;
	FONT-SIZE: 18px;
	BORDER-TOP: 0px;
	BORDER-RIGHT: 0px;
	PADDING-TOP: 0px
}


#headerTabs LI.selected {
	BORDER-BOTTOM: 0px;
	BORDER-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px 0px 1px;
	PADDING-LEFT: 0px;
	/*WIDTH: 83px;*/
	PADDING-RIGHT: 0px;
	DISPLAY: block;
	BACKGROUND: url(tab_right_sel.gif) #333 no-repeat right top;
	FLOAT: left;
	FONT-SIZE: 18px;
	BORDER-TOP: 0px;
	BORDER-RIGHT: 0px;
	PADDING-TOP: 0px
}

#headerTabs LI A {
	TEXT-ALIGN: center;
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 8px;
	PADDING-RIGHT: 8px;
	DISPLAY: block;
	COLOR: #333;
	FONT-SIZE: 11px;
	FONT-WEIGHT: normal;
	TEXT-DECORATION: none;
	PADDING-TOP: 3px;
	background:url(tab_left.gif) no-repeat left top;

}

#headerTabs LI A:hover {
	TEXT-ALIGN: center;
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 8px;
	PADDING-RIGHT: 8px;
	DISPLAY: block;
	COLOR: #333;
	FONT-SIZE: 11px;
	FONT-WEIGHT: normal;
	TEXT-DECORATION: none;
	PADDING-TOP: 3px;
	background:url(tab_right_hov.gif) no-repeat right top;

}


#headerTabs .selected A {
	TEXT-ALIGN: center;
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 8px;
	PADDING-RIGHT: 8px;
	DISPLAY: block;
	COLOR: #fff;
	FONT-SIZE: 11px;
	FONT-WEIGHT: normal;
	TEXT-DECORATION: none;
	PADDING-TOP: 3px;
	background:url(tab_left_sel.gif) no-repeat left top;

}

[Zenicanin]

For headerTabs LI, try adding some padding to the left. Maybe 8px like you did on the a tag.