Animated UL background effect

[ghaza]

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.

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>