信鸽网

JavaScript实现向右伸出的多级网页菜单效果

  作者：bea

本文实例讲述了JavaScript实现向右伸出的多级网页菜单效果。分享给大家供大家参考。具体如下： 这里使用JavaScript实现向右伸出的多级网页菜单效果，鼠标放在左侧的主菜单上，右侧就伸展出二级菜单，基本没有美化，新手所写，欢迎指正，需要完善的地方还挺多。 运行效果截图如下： 在线演示地址如下： http://demo./js/2015/js-right-show-web-menu-codes/ 具体代码如下： <!DOCTYPE HTML PUBLIC "

本文实例讲述了JavaScript实现向右伸出的多级网页菜单效果。分享给大家供大家参考。具体如下：


这里使用JavaScript实现向右伸出的多级网页菜单效果，鼠标放在左侧的主菜单上，右侧就伸展出二级菜单，基本没有美化，新手所写，欢迎指正，需要完善的地方还挺多。


运行效果截图如下：



在线演示地址如下：


http://demo./js/2015/js-right-show-web-menu-codes/


具体代码如下：




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">      

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>向右伸出的多级菜单</title>

<style type="text/css">

*{

padding:0;

margin:0;

}

li{

list-style:none;

}

ul{

background:rgb(200,13,34);

width:250px;

float:left;

}

b{

display:block;

width:500px;

height:40px;

background:rgb(24,122,173);

}

ul li{

height:32px;

}

ul li:hover{

height:32px;

background:orange;

}

#nav1{

position:absolute;

}

#nav3{

position:relative;

left:0;

background:green;

visibility:hidden;

} 

</style>

</head>

<body>

  <div id="nav1">

   <ul id="nav2">

    <li>文学</li>

    <li>艺术</li>

    <li>摄影</li>

   </ul>

   <ul id="nav3">

    <li>1-1</li>

    <li>2-1</li>

    <li>3-1</li>

   </ul>

  </div>

<script type="text/javascript">

 var focus=false;

 var showdiv=document.getElementById("nav3");

 showdiv.onmouseover=function(){

  focus=true;

   this.style.visibility="visible";

 }

  showdiv.onmouseout=function(){

  focus=false;

  this.style.visibility="hidden";

 }

function bindToggle(index,flag){

  var showdiv= document.getElementById("nav3");

  var delayshow= function(){

  if(flag ==1 ){

   showdiv.style.visibility="visible";

   showdiv.style.top=index*32+"px";

  }else {

  if(!focus){

   showdiv.style.visibility="hidden";

  }  

  }

 }

 return function(){ 

 setTimeout(delayshow,150);

 } 

}

 var menu=document.getElementById("nav2").childNodes;

 var index=0;

 for(var i=0;i<menu.length;i++){

 if(1==menu[i].nodeType){

  menu[i].onmouseover= bindToggle.call(menu[i],index,1);

  menu[i].onmouseout= bindToggle.call(menu[i],index,0);

   index++;

 }  

 } 

</script>

</body>

</html>


希望本文所述对大家的javascript程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: