91、鼠标驱动的下拉菜单

91、鼠标驱动的下拉菜单

脚本说明:

把如下代码加入<body>区域中

<STYLE type=text/css>.menubar {

       BORDER-RIGHT: 1px outset; BORDER-TOP: 1px outset; BACKGROUND: #0099cc; BORDER-LEFT: 1px outset; WIDTH: 100px; CURSOR: default; COLOR: yellow; BORDER-BOTTOM: 1px outset; POSITION: absolute; TOP: 10px; HEIGHT: 20px

}

.menu {

       BORDER-RIGHT: 2px outset; PADDING-RIGHT: 15px; BORDER-TOP: white 2px outset; DISPLAY: none; PADDING-LEFT: 15px; BACKGROUND: yellow; PADDING-BOTTOM: 15px; BORDER-LEFT: 2px outset; WIDTH: 140px; PADDING-TOP: 15px; BORDER-BOTTOM: 2px outset; POSITION: absolute; TOP: 30px

}

.menu A {

       COLOR: blue; TEXT-DECORATION: none

}

.menu A:hover {

       COLOR: #ffffff

}

</STYLE>

<SCRIPT language=javascript>

function menuControl(show)

{

window.event.cancelBubble=true;

var objID=event.srcElement.id;

var index=objID.indexOf("_");

var mainID=objID.substring(0,index);

var numID=objID.substring(index+1,objID.length);

if(mainID=="menubar")

{

if(show==1)

{

eval("showMenu("+"menu_"+numID+")");

}

else

{

eval("hideMenu("+"menu_"+numID+")");

}

}

 

}

 

var nbottom=0,speed=7;

function displayMenu(obj)

{

obj.style.clip="rect(0 100% "+nbottom+"% 0)";

nbottom+=speed;

if(nbottom<=100)

{

timerID=setTimeout("displayMenu("+obj.id+"),70");

}

else clearTimeout(timerID);

}

function showMenu(obj)

{

obj.style.display="block";

obj.style.clip="rect(0 0 0 0)";

nbottom=5;

displayMenu(obj);

}

function hideMenu(obj)

{

nbottom=0;

obj.style.display="none";

}

function keepMenu(obj)

{

obj.style.display="block";

}

</SCRIPT>

<TABLE style="FONT-SIZE: 15px" cellSpacing=0 cellPadding=0 width=400 border=0>

  <TBODY>

  <TR>

    <TD width="20%">

       <DIV class=menu id=menu_1 onmouseover=keepMenu(this)

      onmouseout=hideMenu(this) align=left><A

      href="http://www.7stk.com/">网页特效代码 </A><BR><A

      href="http://www.7stk.com/fine/index.htm">重庆大学</A><BR><A

      href="http://www.7stk.com/">重庆交通学院</A> </DIV></TD>

    <TD width="20%">

      <DIV class=menu id=menu_2 onmouseover=keepMenu(this)

      onmouseout=hideMenu(this) align=left><A

      href="http://www.7stk.com/music/music.htm">天极网</A><BR><A

      href="http://www.7stk.com/">电脑爱好者</A><BR><A

      href="http://www.7stk.com/">上网杂志</A> </DIV></TD>

    <TD width="20%">

      <DIV class=menu id=menu_3 onmouseover=keepMenu(this)

      onmouseout=hideMenu(this) align=left><A

      href="http://www.163.com/">163电子邮件</A><BR><A

      href="http://www.7stk.com/">首都在线</A><BR><A

      href="http://www.21cn.com/">21CN电子邮件</A><BR><A

      href="http://www.7stk.com/">炎皇在线</A> </DIV></TD>

    <TD width="20%">

      <DIV class=menu id=menu_4 onmouseover=keepMenu(this)

      onmouseout=hideMenu(this) align=left><A

      href="http://www.sohu.com.cn/">搜狐</A><BR><A

      href="http://www.yahoo.com/">雅虎</A><BR><A

      href="http://www.7stk.com/">搜索客</A><BR><A

      href="http://www.sina.com/">新浪网</A><BR><A

      href="http://www.7stk.com/">远航网站</A>

      </DIV></TD></TR></TBODY></TABLE>

 

Write a comment

Comments: 0