從頁面左側滑出的導航菜單_菜單導航特效

從頁面左側滑出的導航菜單，響應鼠標運作，鼠標放上從左側緩慢移出，鼠標移走則菜單自動隱躲。

<html>

<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312">
<title>滑出式菜單</title>
<style>
<!--
#ssm2 A {
	color:black;
	text-decoration:none; 
	font-size:12px;
	font-family:verdana;
	}

#ssm2 A:hover {
	color:red;
	 }

-->
</style>
</head>
<body>
<script language="JavaScript"> 
 
function MM_displayStatusMsg(msgStr) {  
  status=msgStr; 
  document.MM_returnValue = true; 
} 
 
function highlight(x){ 
document.forms[x].elements[0].focus() 
document.forms[x].elements[0].select() 
} 
 
function MM_jumpMenu(targ,selObj,restore){  
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); 
  if (restore) selObj.selectedIndex=0; 
} 
 
var NS 
IE=document.all; 
NS=document.layers; 
 
 
hdrFontFamily="Verdana"; 
hdrFontSize="2"; 
hdrFontColor="white"; 
hdrBGColor="#666666"; 
linkFontFamily="Verdana"; 
linkFontSize="2"; 
linkBGColor="white"; 
linkOverBGColor="#CCCCCC"; 
linkTarget="_top"; 
YOffset=60; 
staticYOffset=20; 
menuBGColor="black"; 
menuIsStatic="no"; 
menuHeader="源碼下載" 
menuWidth=150; // Must be a multiple of 5! 
staticMode="advanced" 
barBGColor="#1298fd"; 
barFontFamily="Verdana"; 
barFontSize="2"; 
barFontColor="white"; 
barText="網站導航"; 
 
function moveOut() { 
if (window.cancel) { 
  cancel=""; 
} 
 
if (window.moving2) { 
  clearTimeout(moving2); 
  moving2=""; 
} 
if ((IE  &&  ssm2.style.pixelLeft<0)||(NS  &&  document.ssm2.left<0)) { 
  if (IE) {ssm2.style.pixelLeft += (5%menuWidth); 
} 
if (NS) { 
  document.ssm2.left += (5%menuWidth); 
} 
 
moving1 = setTimeout('moveOut()', 5) 
} 
else { 
  clearTimeout(moving1) 
  } 
}; 
 
function moveBack() { 
  cancel = moveBack1() 
} 
function moveBack1() { 
  if (window.moving1) { 
    clearTimeout(moving1) 
} 
 
if ((IE  &&  ssm2.style.pixelLeft>(-menuWidth))||(NS  &&  document.ssm2.left>(-150))) { 
  if (IE) {ssm2.style.pixelLeft -= (5%menuWidth); 
} 
if (NS) { 
  document.ssm2.left -= (5%menuWidth); 
} 
moving2 = setTimeout('moveBack1()', 5)} 
  else { 
    clearTimeout(moving2) 
  } 
}; 
 
lastY = 0; 
function makeStatic(mode) { 
if (IE) {winY = document.body.scrollTop;var NM=ssm2.style 
} 
if (NS) {winY = window.pageYOffset;var NM=document.ssm2 
} 
if (mode=="smooth") { 
  if ((IE||NS)  &&  winY!=lastY) { 
    smooth = .2 * (winY - lastY); 
      if(smooth > 0) smooth = Math.ceil(smooth); 
    else smooth = Math.floor(smooth); 
      if (IE) NM.pixelTop+=smooth; 
        if (NS) NM.top+=smooth; 
      lastY = lastY+smooth; 
} 
setTimeout('makeStatic("smooth")', 1) 
} 
 
else if (mode=="advanced") { 
  if ((IE||NS)  &&  winY>YOffset-staticYOffset) { 
    if (IE) {NM.pixelTop=winY+staticYOffset 
  } 
if (NS) {NM.top=winY+staticYOffset 
  } 
} 
else { 
if (IE) {NM.pixelTop=YOffset 
} 
 if (NS) {NM.top=YOffset-7 
 } 
} 
setTimeout('makeStatic("advanced")', 1) 
 } 
} 
 
function init() { 
if (IE) { 
ssm2.style.pixelLeft = -menuWidth; 
ssm2.style.visibility = "visible" 
} 
else if (NS) { 
document.ssm2.left = -menuWidth; 
document.ssm2.visibility = "show" 
} 
else { 
alert('Choose either the "smooth" or "advanced" static modes!') 
} 
} 
 
 
function MM_displayStatusMsg(msgStr) {  
  status=msgStr; 
  document.MM_returnValue = true; 
} 
</script>
 
<script language="JavaScript"> 
if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')} 
if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')} 
tempBar="" 
for (i=0;i<barText.length;i++) { 
tempBar+=barText.substring(i, i+1)+"<BR>"} 
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></p></TD></tr>') 
function addItem(text, link, target) { 
if (!target) {target=linkTarget} 
document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')} 
function addHdr(text) { 
document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></td></tr>')} 
 
addItem(' ASP.NET', '#', '_blank'); 
addItem(' VB.NET', '#', '_blank'); 
addItem('   VC.NET', '#', '_blank'); 
addItem('   PHP', '#', '_blank'); 
addItem('   DELPHI', '#', '_blank'); 
addItem('   JAVA', '#', '_blank'); 
addHdr('技術文章'); 
addItem('   ASP', '#', '_blank'); 
addItem('   ASP.NET', '#', '_blank'); 
addItem('   CSHARP', '#', '_blank'); 
addItem('   VB.NET', '#', '_blank'); 
addItem('   JAVA', '#', '_blank'); 
addItem('   JSP', '#', '_blank');

document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </td></TR></table>') 
if (IE) {document.write('</DIV>')} 
if (NS) {document.write('</LAYER>')} 
if ((IE||NS)  &&  (menuIsStatic=="yes" && staticMode)) {makeStatic(staticMode);} 
 
</script> 
<script> 
window.onload=init 
</script> 
 
</body> 
</html>

所屬頻道：菜單導航特效/更新時間：2010-05-22

[收藏][報錯][返回列表]

相關菜單導航特效：

從頁面左側滑出的導航菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些