html 菜单过渡,JavaScript 二级菜单（含过渡动画）

二级菜单

*{

list-style: none;

text-decoration: none;/*text-align: center;*/}

#my_menu{

width: 65px;/*border: 1px solid black;*/border-radius:5px;

background-color:lightgoldenrodyellow ;

}

span a{

width: 70px;

border: 1px solid black;

border-radius:5px;

color: gray;

}

.collapsed {

height: 20px;

}

#my_menu div{

overflow: hidden;

}

span{

color: white;

background-color: black;

}

span:hover{

background-color: green;

}

li{

padding: 3px 0px;

border-bottom: 1px solid gainsboro;

}

a{

font-size:14px ;

}

a:hover{

color: red;

}

在线工具

图像优化 收藏夹 邮 件 按 钮

支持我们

推荐我们 链接我们 资源

合作伙伴

JS工具包 CSS驱动 CForms

测试电流

测试1 测试2 测试3

//tools.js 在我的博客里

var menuSpan=document.getElementsByClassName("menuSpan");//定义一个变量来保存当前打开的div

var openDiv=menuSpan[0].parentNode;for(i=0;i

menuSpan[i].οnclick=function(){//alert("Hello");

//获取父元素div

var parDiv=this.parentNode;//-在切换之前，获取元素盖度

var begin=parDiv.offsetHeight;//用tools.js通过切换高度关闭打开div

toggleClass(parDiv,"collapsed");//-在切换之后，获取元素盖度

var end=parDiv.offsetHeight;//console.log("begin："+begin+"，end："+end);

//-动画效果，就是高度间的过度

parDiv.style.height=begin+"px";//move()构造函数用.style...使用设置的，所有上面要设置一下.style...,不改变格式

move(parDiv,"height",end,10,function(){//动画执行完毕，内联样式没有存在的意义反而会影响class，删除

parDiv.style.height="";

});//来完成打开一个另外打开的关闭

//判断两个不相等，防止同一个div多加一次了class

if(openDiv!=parDiv && !hasClass(openDiv,"collapsed")){//添加class，以关闭div//addClass(openDiv,"collapsed");

//为统一过度动画，toggleClass()

toggleClass(openDiv,"collapsed"); //hasClass()没有才进判断

//，达到addClass()相同效果

}//修改openDiv为当前打开的菜单

openDiv=parDiv;

}

}