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

<!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实现向右伸出的多级网页菜单

时间: 2024-11-01 04:08:14

JavaScript实现向右伸出的多级网页菜单的相关文章

水平布局的多级网页菜单,JS、css代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

CSS JavaScript仿天猫侧边网页菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

全国省市县无刷新多级关联菜单

<html><head><title>阿里西西网页特效演示,全国省市县无刷新多级关联菜单</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style>body,select{ font-size:9pt; font-family:Verdana;}a{ color:red; text-deco

完美拖拽 &amp;&amp;仿腾讯微博效果&amp;&amp; 自定义多级右键菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

多级关联菜单:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <!-- ################################################# # 孤狼jQuery系列 # # *** 孤 狼 *** # QQ:31

使用jquery实现的多级树形菜单代码实例

使用jquery实现的多级树形菜单代码实例:树形菜单在网站中有大量的应用,这当然是因为它的独特优点,首先它可以有效的组织数据,使分类更为清晰明了,通常情况下树形菜单是可以折叠的,这样可以以更小的空间容纳更多的数据,下面就详细介绍一个使用jquery实现的属性菜单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&q

CSS3打造的超酷的多级扇形菜单

<!DOCTYPE HTML> <html lang=zh-cn> <head> <meta charset=utf-8> <title>CSS3打造的超酷的多级扇形菜单丨梨花粉丨石家庄学前教育</title> <style> *{margin:0px;padding:0px;} body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000

多级导航菜单

<html> <head> <title>树状列表结构测试</title> <style type="text/css"> * { margin:0; padding:0; border:0; } body { font:12px/130% verdana, geneva, arial, helvetica, sans-serif, 宋体; } li { list-style:none; } .clearfix:after {

MVC 多级目录菜单

MVC多级目录菜单  ----- 简单模拟 Model ---- cs { public class Class1 { public int ID{get;set;} public int parentID { get; set; } public int childID { get; set; } public string title { get; set; } } MVC View ---- cshtml: @using WebApplication1.Models; @{ ViewBag