调用:
<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);
}
}