« 纯CSS搞的alt跟title显示html效果六个php开发的B2B行业门户网站源码 »

css+js无限级菜单

2009-12-10 18:6:58


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan">
<script language="JavaScript" type="text/javascript">

var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
var mouseX=0;
var mouseY=0;

function setNodeType(obj,type){
 var c=obj.parentNode;
 var s=c.getElementsByTagName("span");
 var t={leaf:{style:"clsLeaf",text:"."},open:{style:"clsExpand",text:"-"},close:{style:"clsCollapse",text:"+"}}
 var o=null;
 if (s&&s[0]){
  o=s[0];
 }
 else{
  var o=document.createElement("span");
  c.insertBefore(o,obj);
 }
 o.innerHTML=t[type]["text"];
 o.className=t[type]["style"];
}
//获取鼠标位置
function moveToMouseLoc(e){
  if(ns4||ns6){
    mouseX = e.pageX;
    mouseY = e.pageY;
  }
  else{
    mouseX = event.x + document.body.scrollLeft;
    mouseY = event.y + document.documentElement.scrollTop;
  }
  return true;
}

//初始化菜单
//opened:true,默认展开,false,默认收起
function initNav(obj,opened){
 if(ns4) document.captureEvents(Event.MOUSEMOVE);
 document.onmousemove = moveToMouseLoc;
 var nav=document.getElementById(obj);
 var navItems=nav.getElementsByTagName("li");
 for (var i=0,c;c=navItems[i];i++){
  var t=c.getElementsByTagName("ul");
  var a=c.getElementsByTagName("SAMP")[0];
  if (t.length==0){
   setNodeType(a,"leaf")
   a.onmouseout=function(){
    var tipDiv=this.parentNode.getElementsByTagName("div")[0];
    if (tipDiv){
      tipDiv.style.display='none';
    }
   };
  }
  else{
   for (var j=0;j<t.length ;j++ ){
           t[j].style.display='none';
   }
  setNodeType(a,opened?"open":"close");
  a.onfocus=function(){this.blur();return true;}
   a.onmouseup=function(){
    var t,p;
          p=this.parentNode;
    var t=p.getElementsByTagName("ul")[0];

    if (t.style.display=='none'){
     setNodeType(this,"open");
     t.style.display='';
    }
    else{
     setNodeType(this,"close");
     t.style.display='none';
    }
    return false;
   };
   //设置菜单的样式
   a.onmouseover=function(){
    var t=this.parentNode.getElementsByTagName("ul")[0];
   };
   //设置菜单的样式
   a.onmouseout=function(){
    var t=this.parentNode.getElementsByTagName("ul")[0];
    var tipDiv=this.parentNode.getElementsByTagName("div")[0];
    if (tipDiv){
      tipDiv.style.display='none';
    }
   };
   //设置菜单提示
   a.onmousemove=function(){
     var tipDiv=this.parentNode.getElementsByTagName("div")[0];
     if (tipDiv){
    with (tipDiv.style){
      display='block';
      left=parseInt(mouseX)+"px";
      top=(parseInt(mouseY)+20)+"px";
      position='absolute';
    }
     }
   }
  }
 }
}
</script>
<style type="text/css">
*,html,body {
 margin: 0;
 padding: 0;
 font-size: 12px;
 font-family: 宋体;
}

#nav ul {
 list-style: none;
}

#nav li {
 padding: 3px 0 0 13px;
}

#nav img {
 border: 0;
 padding: 2px 0 0 8px
}


em {
 font-style: normal;
}

#nav em {
 color: #303030;
 text-decoration: none;
 padding: 2px 0 0 2px;
}

#nav li div {
 display: none;
 position: absolute;
 background: #fff;
 color: #777;
 border: solid 1px;
 padding: 3px;
}

#nav li div div {
 display: block;
 position: static;
 padding: 0;
 border: 0;
}
samp{
 cursor:hand;
}
#nav a:hover {
 color: blue;
}

img {
 border: 0
}

#nav span,span.clsExpand,span.clsCollapse {
 font-size: 9px;
 color: #ccc;
 position: relative;
 display: inline;
 top: -1px;
 height: 14px;
 border: solid 1px #ccc;
 margin: 0 5px 0 0;
 padding: 1px 3px !important;
 padding: 1px 3px 0;
 font-weight: normal;
}

#nav span.clsLeaf {
 font-size: 7px;
 padding: 0px 2px 4px 5px !important;
 padding: 0px 2px 3px 5px;
 top: -3px;
}
</style>
</head>
<body>
<div id="nav">

<ul>
 <li><SAMP>男士服装</SAMP>
 <ul>
  <li><SAMP>衬衫T恤</SAMP></li>
  <li><SAMP>上衣外套</SAMP>
  <ul>
   <li><SAMP>夹克 </SAMP></li>
   <li><SAMP>棉衣 </SAMP></li>
   <li><SAMP>羽绒服 </SAMP></li>
   <li><SAMP>皮衣 </SAMP></li>
   <li><SAMP>大衣 </SAMP></li>
   <li><SAMP>风衣 </SAMP></li>
   <li><SAMP>马甲 </SAMP></li>
   <li><SAMP>牛仔上衣 </SAMP></li>
  </ul>
  </li>
  <li><SAMP>针织衫</SAMP></li>
  <li><SAMP>西服/套装</SAMP></li>
  <li><SAMP>裤子</SAMP>
  <ul>
   <li><SAMP>牛仔裤 </SAMP></li>
   <li><SAMP>休闲裤 </SAMP></li>
   <li><SAMP>西裤 </SAMP></li>
   <li><SAMP>短裤 </SAMP></li>
  </ul>
  </li>
  <li><SAMP>男士配件</SAMP></li>
 </ul>
 </li>
 <li><SAMP>女士服装</SAMP>
 <ul>
  <li><SAMP>上衣外套 </SAMP>
  <ul>
   <li><SAMP>风衣 </SAMP></li>
   <li><SAMP>夹克 </SAMP></li>
   <li><SAMP>大衣 </SAMP></li>
   <li><SAMP>棉衣 </SAMP></li>
   <li><SAMP>皮衣/皮草 </SAMP></li>
   <li><SAMP>羽绒服 </SAMP></li>
   <li><SAMP>马甲 </SAMP></li>
   <li><SAMP>牛仔上衣 </SAMP></li>
  </ul>
  </li>
  <li><SAMP>衬衫T恤 </SAMP></li>
  <li><SAMP>针织衫 </SAMP></li>
  <li><SAMP>裙子 </SAMP></li>
  <li><SAMP>裤子 </SAMP>
  <ul>
   <li><SAMP>牛仔裤 </SAMP></li>
   <li><SAMP>长裤 </SAMP></li>
   <li><SAMP>背带裤 </SAMP></li>
   <li><SAMP>裙裤 </SAMP></li>
   <li><SAMP>打底裤 </SAMP></li>
   <li><SAMP>短裤 </SAMP></li>
   <li><SAMP>五分裤 </SAMP></li>
   <li><SAMP>七分裤 </SAMP></li>
   <li><SAMP>九分裤 </SAMP></li>
  </ul>
  </li>
  <li><SAMP>西服/套装 </SAMP></li>
  <li><SAMP>女士配件 </SAMP></li>
  <li><SAMP>孕妇装 </SAMP></li>
  <li><SAMP>中式服装/礼服 </SAMP></li>
 </ul>
 </li>
 <li><SAMP>运动服装</SAMP>
 <ul>
  <li><SAMP>运动外套 </SAMP></li>
  <li><SAMP>运动裤 </SAMP>
  <ul>
   <li><SAMP>长裤 </SAMP></li>
   <li><SAMP>短裤 </SAMP></li>
   <li><SAMP>裙裤 </SAMP></li>
   <li><SAMP>五分裤 </SAMP></li>
   <li><SAMP>七分裤 </SAMP></li>
   <li><SAMP>九分裤 </SAMP></li>
  </ul>
  </li>
  <li><SAMP>卫衣 </SAMP></li>
  <li><SAMP>运动T恤 </SAMP></li>
  <li><SAMP>运动套装 </SAMP>
  <ul>
   <li><SAMP>男士运动套装 </SAMP></li>
   <li><SAMP>女士运动套装 </SAMP></li>
  </ul>
  </li>
 </ul>
 </li>
 <li><SAMP>女鞋</SAMP>
 <ul>
  <li><SAMP>靴子 </SAMP></li>
  <li><SAMP>商务休闲鞋 </SAMP></li>
  <li><SAMP>正装鞋 </SAMP></li>
  <li><SAMP>拖鞋 </SAMP></li>
  <li><SAMP>凉鞋 </SAMP></li>
  <li><SAMP>布鞋/绣花鞋 </SAMP></li>
 </ul>
 </li>
 <li><SAMP>男鞋</SAMP>
 <ul>
  <li><SAMP>男靴 </SAMP></li>
  <li><SAMP>商务休闲鞋 </SAMP></li>
  <li><SAMP>正装鞋 </SAMP></li>
  <li><SAMP>拖鞋 </SAMP></li>
  <li><SAMP>凉鞋 </SAMP></li>
  <li><SAMP>布鞋 </SAMP></li>
 </ul>
 </li>
 <li><SAMP>运动鞋</SAMP>
 <ul>
  <li><SAMP>跑步鞋/慢跑鞋 </SAMP></li>
  <li><SAMP>休闲鞋 </SAMP></li>
  <li><SAMP>篮球鞋 </SAMP></li>
  <li><SAMP>网羽鞋 </SAMP></li>
  <li><SAMP>经典/复古鞋 </SAMP></li>
  <li><SAMP>板球鞋 </SAMP></li>
  <li><SAMP>足球鞋 </SAMP></li>
  <li><SAMP>沙滩鞋 </SAMP></li>
 </ul>
 </li>
 <li><SAMP>内衣、袜品</SAMP>
 <ul>
  <li><SAMP>女士内衣 </SAMP></li>
  <li><SAMP>男士内衣 </SAMP></li>
  <li><SAMP> 保暖内衣 </SAMP></li>
  <li><SAMP>家居服/睡衣 </SAMP></li>
  <li><SAMP>功能性内衣 </SAMP></li>
  <li><SAMP>袜子 </SAMP></li>
 </ul>
 </li>
 <li><SAMP>数码家电</SAMP>
 <ul>
  <li><SAMP>家电 </SAMP></li>
  <li><SAMP>手机通讯 </SAMP></li>
  <li><SAMP>电脑产品 </SAMP></li>
  <li><SAMP>数码产品 </SAMP></li>
  <li><SAMP>办公用品 </SAMP></li>
 </ul>
 </li>
 <li><SAMP>化妆美肤品</SAMP>
 <ul>
  <li><SAMP>美白 </SAMP></li>
  <li><SAMP>修护 </SAMP></li>
  <li><SAMP>保湿 </SAMP></li>
  <li><SAMP>康敏感 </SAMP></li>
  <li><SAMP>男士专区 </SAMP></li>
  <li><SAMP>彩妆 </SAMP></li>
  <li><SAMP>香水 </SAMP></li>
  <li><SAMP>个人护理 </SAMP></li>
  <li><SAMP>面膜 </SAMP></li>
 </ul>
 </li>
 <li><SAMP>礼品</SAMP></li>
 <li><SAMP>成人用品</SAMP></li>
 <li><SAMP>箱包皮具</SAMP></li>
 <li><SAMP>运动器材</SAMP></li>
</ul>
</div>

<script>
initNav('nav',false);
</script>
</body>
</html>


 

Tags: js  javascript  css  
发布:subin | 分类:Html / Javascript / Css | 评论:0 | 引用:0 | 浏览:

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

网站目录

最近发表

最新评论及回复

文章归档

Search

Powered By Z-Blog 1.8 Terminator(beta) Build 71218 Designed by Michael

Copyright 0-9999 subin.org.cn Rights Reserved. 晋ICP备08000685号