Introduction
Here I am going to 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. This animation uses CSS3,
which works in IE10+, FF, Chrome, and Safari.
Implimentation
CSS code
Put this CSS code in the head section:
<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>
Html code
Place this html code in body section:
<ul class="animatedbgul">
<li><span>Java</span></li>
<li><span>Python</span></li>
<li><span>Clarion</span></li>
<li><span>Clipper</span></li>
</ul>