Đặt code này vào tag HEAD :
<style type="text/css">
.menulinks {position:relative;}
#menucont
a{color:#006699; font-weight:bold; text-decoration:none;}
#menucont
a:hover{color:#ff0000; font-weight:bold; text-decoration:underline overline;
text-transform: uppercase;}
</style>
<SCRIPT
LANGUAGE="JavaScript">
nSpace=5 // how many space maximum between each
letter
nSpeed=100 // the speed of the animation
timerLSM=null;
function
LetterSpacingMenu() {
if(document.getElementById){
lnks =
Math.floor(Math.random()*lnk.length);
letterSpacing =
Math.floor(Math.random()*nSpace);
lnk[lnks].style.letterSpacing =
letterSpacing + "px";
timerLSM = setTimeout("LetterSpacingMenu()",
nSpeed);
}
}
function StopMenu() {
if(document.getElementById)
{
clearTimeout(timerLSM);
for(i=0;i<lnk.length;i++)
lnk[i].style.letterSpacing
= 0 + "px";
}
}
function LSMenuInit() {
if(document.getElementById)
{
lnk = document.getElementById("menucont").getElementsByTagName("a");
cnt
= document.getElementById("menucont");
cnt.style.textAlign=
"center";
cnt.onmouseover=StopMenu;
cnt.onmouseout=LetterSpacingMenu;
LetterSpacingMenu();
}
}
onload=LSMenuInit;
<!--
Begin
// End -->
</script>
Đặt code này vào tag BODY :
<div id="menucont">
<!-- Put all links between <center>
</center> to get those links align center for older browser
-->
<a href="#" id="a1" class="menulinks">what's
new</a><br>
<a href="#" id="a2" class="menulinks">about
this site</a><br>
<a href="#" id="a3"
class="menulinks">scripts</a><br>
<a href="#" id="a4"
class="menulinks">applets</a><br>
<a href="#" id="a5"
class="menulinks">links</a><br>
<a href="#" id="a6"
class="menulinks">recommend this site</a><br>
<a href="#"
id="a7" class="menulinks">contact us</a>
</div>
Các bạn nhấp chuột phải, xem "View Source" sẽ thấy rõ.