很简单的一个2级导航 留念 呵呵

javascript

2009-07-02 13:36

调用:
<div id="m_list">
<ul>
<li><img src="img/1.gif"   /><div>连接连接【1】</div><li>
<li><img src="img/2.gif"   /><div>连接连接【2】</div><li>
<li><img src="img/3.gif"   /><div>连接连接【3】</div><li>
<li><img src="img/4.gif"   /><div>连接连接【4】</div><li>
<li><img src="img/5.gif"   /><div>连接连接【5】</div><li>
</ul>
</div>
<script language="javascript" src="men.js"></script>



css:
<style type="text/css">
#m_list ul,li,img { margin:0; padding:0;}
#m_list { background:#339; width:500px; height:50px;}/*定义1级 菜单大小 */
#m_list ul{list-style:none; }
#m_list ul li {float:left; position:relative;}
#m_list li div{position:absolute; width:300px; height:30px; top:60px; left:0px; display:none; background:#999; line-height:30px;}
                                                 /*定义2级菜单与一级菜单的间距 top:70px; 和大小*/
</style>

men.js
// JavaScript Document
var list_yes=1; //1开启 0关闭 2级菜单
var img_2="_1" //切换图片后缀
var img_m="img/" //图片路径
var m_r=1; //1是渐变 0是无效果
var m_t=15; //显示速度

var m_list=document.getElementById("m_list");
s_var=m_list.getElementsByTagName("img").length;
for (i=0;i<s_var;i++){
m_list.getElementsByTagName("img")[i].onmouseover=function(i){
ccc=this.src.substr(this.src.lastIndexOf("/")+1,this.src.lastIndexOf(".")-this.src.lastIndexOf("/")-1);
ccc=ccc.replace(img_2,"");
this.src=img_m+ccc+img_2+".gif";
if (list_yes){
   for (ii=0;ii<s_var;ii++){
    m_list.getElementsByTagName("div")[ii].style.display="none";
   }
  
if (m_r){
   m_list.getElementsByTagName("div")[ccc-1].style.display="block";
   setAlpha(m_list.getElementsByTagName("div")[ccc-1],0);
   }
else{
   m_list.getElementsByTagName("div")[ccc-1].style.display="block";
}

}
};


m_list.getElementsByTagName("img")[i].onmouseout=function(){
ccc=this.src.substr(this.src.lastIndexOf("/")+1,this.src.lastIndexOf(".")-this.src.lastIndexOf("/")-1);
ccc=ccc.replace(img_2,"");
this.src=img_m+ccc+".gif";
};
}


function setAlpha(Obj,opacityValue){
var Browser_Name=navigator.appName;
    if (Browser_Name=="Microsoft Internet Explorer"){
        Obj.style.filter="alpha(opacity="+opacityValue+")" ;
    }
    else{
        Obj.style.MozOpacity = opacityValue/100;
    }
    if (opacityValue < 100){
        setTimeout(function(){setAlpha(Obj,opacityValue+m_t)},100);
    }
}