Dynamic Drive CSS Library- Animated UL background effect

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: CSS3 demos: Other: Here

Animated UL background effect

Author: Dynamic Drive

This CSS example demonstrates animating the min-width property of an element to create a stretching background effect. Here we use the technique to add a nice rollover effect to UL lists, so the user can easily home in on a particular list item just by rolling the mouse over it. The animation uses CSS3, which works in IE10+, FF, Chrome, and Safari.

Demo (best viewed in (IE10+, FF3.5+, Chrome/Safari, and Opera 10+):

Food and Drinks
Events and Activities
Vacations
Education and Self Improvement

The CSS:

<style>

ul.animatedbgul{
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.animatedbgul li{
	width: 100%;
	clear:left; /* clear contents of inner span, which will be floated left */
	overflow: hidden; /* clear contents of inner span, which will be floated left */
}

ul.animatedbgul li span{
	display: block;
	float: left; /* cause width of each span to take up only as much space as needed */
	min-width: 0px; /* animated property. Explicit min-width defined so animation works. */
	margin-bottom: 5px;
	padding: 8px;
	color: #5d5d5d;
}

ul.animatedbgul li:hover span{
	color: #fff;
	background: #ce3e3e;
	border-left: 8px solid darkred;
	min-width: 450px; /* animated property. Set to desired final length of background */
	-webkit-box-shadow: 0 0 5px gray;
	-moz-box-shadow: 0 0 5px gray;
	box-shadow: 0 0 5px gray;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

</style>

The HTML:

<ul class="animatedbgul">
	<li><span>Food and Drinks</span></li>
	<li><span>Events and Activities</span></li>
	<li><span>Vacations</span></li>
	<li><span>Education and Self Improvement</span></li>
</ul>

Code Info

Rate this code:

Date Posted: 02/22/2013

Revision History: None

Usage Terms: Click here

Your Comments (0)

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.

Commenting is not available in this weblog entry.