Create Great JavaScript and CSS Menus Simply - Rollover Menu Example
(Page 3 of 4 )
Now for the next part, I'll show you a more complex example but again, it can be followed and edited with ease. I shall explain the code again as it progresses. We'll create a rollover menu again with four links, and each rollover effect adds a different color to the menu item. This type of menu is quite popular and now a very commonplace menu system on the web. It has a very smooth design feel to it.
<html>
<script language="javascript">
<!--
function mouseover(menu,page){
menu.style.background='#6633C0';
description.innerHTML=page;
}
function mouseout(menu){
menu.style.background='#663390'
description.innerHTML=' '
}
-->
</script>
<table cellpadding="2" cellspacing="0"width="100">
<tr>
<td id="item1" style="cursor:hand;background-color:#663399"
onMouseOver="mouseover(item1,'')"onMouseOut="mouseout(item1)"
onClick="location.href='page1.html'">
<div align="center">Page 1</div>
</td>
</tr>
<tr>
<td id="item2" style="cursor:hand;background-color:#663399"
onMouseOver="mouseover(item2,'')"onMouseOut="mouseout(item2)"
onClick="location.href='page2.html'">
<div align="center">Page 2</div>
</td>
</tr>
<tr>
<td id="item3" style="cursor:hand;background-color:#663399"
onMouseOver="mouseover(item3,'')"onMouseOut="mouseout(item3)"
onClick="location.href='page3.html'">
<div align="center">Page 3</div>
</td>
</tr>
<tr>
<td id="item4" style="cursor:hand;background-color:#663399"
onMouseOver="mouseover(item4,'')"onMouseOut="mouseout(item4)"
onClick="location.href='page4.html'">
<div align="center">Page 4</div>
</td>
</tr>
<tr>
<td id="item5" style="cursor:hand;background-color:#663399"
onMouseOver="mouseover(item5,'')"onMouseOut="mouseout(item5)"
onClick="location.href='page5.html'">
<div align="center"></div>
</td>
</tr>
<tr>
<td><font id="description"size="1"></font></td>
</tr>
</table>
</html>
Replace the location.href URLs with the links required. The left hand menu result can be increased to hold many more menu items. These menus are great for the standard vertical menus for most types of sites. More links can be added; it is quite straightforward to edit.
Next: Alternative Design Idea with CSS >>
More Design Usability Articles
More By Stephen Davies
