Animowane menu (zwany także "rollover menu") - menu, ktore reaguje na najechanie kursorem poprzez zmianę graficznej reprezentacji odnośnika. W wielu przypadkach efekt ten uzyskiwany jest przy pomocy Java Script - poniższy przykład demonstruje ten sam efekt, jednak z wykorzystaniem tylko i wyłącznie CSS.
<ul class="rolloverMenu"> <li><a href="#">Opcja 1</a></li> <li><a href="#">Opcja 1</a></li> <li><a href="#">Opcja 1</a></li> <li><a href="#">Opcja 1</a></li> <li><a href="#">Opcja 1</a></li> </ul> <br /> <ul class="rolloverMenu rolloverMenuHorizontal"> <li><a href="#">Opcja 1</a></li> <li><a href="#">Opcja 1</a></li> <li><a href="#">Opcja 1</a></li> <li><a href="#">Opcja 1</a></li> <li><a href="#">Opcja 1</a></li> </ul>
Jak widać, dla poziomego menu ustalamy dodatkową klasę
<ul class="rolloverMenu rolloverMenuHorizontal">
ul.rolloverMenu {
margin: 0px;
padding: 0px;
}
ul.rolloverMenu li {
list-style: none;
list-style-image: none;
}
ul.rolloverMenuHorizontal li {
float: left;
width: 129px;
}
ul.rolloverMenu li a {
display: block;
height: 24px;
background: url('images/menu_1.gif') no-repeat;
text-indent: -9999px;
}
ul.rolloverMenu li a.active,
ul.rolloverMenu li a:hover {
background-position: 0 -24px;
}