« »

Hiệu ứng tạo ra một trình đơn với các tùy chọn luôn thay đổi kích thước một cách tự động. Một hiệu ứng khá bắt mắt.

Nhãn: Menu động đậy

Demo
Phóng to
Tải lại
Cửa sổ mới

Mã nguồn
CSS
JavaScript
HTML
In

Copy All x2

<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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<DIV id=menucont><A class=menulinks 
href="http://JavaScriptBank.com" 
id=a1>JavaScriptBank.com</A><BR><A class=menulinks 
href="http://JavaScriptBank.com" 
id=a2>JavaScriptBank.com</A><BR><A class=menulinks 
href="http://JavaScriptBank.com" 
id=a3>JavaScriptBank.com</A><BR><A class=menulinks 
href="http://JavaScriptBank.com" 
id=a4>JavaScriptBank.com</A><BR><A class=menulinks 
href="http://JavaScriptBank.com" 
id=a5>JavaScriptBank.com</A><BR><A class=menulinks 
href="http://JavaScriptBank.com" 
id=a6>JavaScriptBank.com</A><BR><A class=menulinks 
href="http://JavaScriptBank.com" 
id=a7>JavaScriptBank.com</A> </DIV>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->