二级菜单(avalon+jquery动画)

by 司徒正美

var vm = avalon.define({
$id: "test",
array: [
{
name: 111111,
child: [
{name: 1.1},
{name: 1.2},
{name: 1.3},
]
},
{
name: 22222,
child: [
{name: 2.1},
{name: 2.2},
{name: 3.3},
]
},
{
name: 33333,
child: [
{name: 3.1},
{name: 3.2},
{name: 3.3}
]
}
],
selectedIndex: 0
})
$(function () {
$(document).on("click", ".first-menu li", function () {
$(".show .second-menu").css("margin-left", -200)
$(".show").removeClass("show").width(0)
var _this = this
setTimeout(function () {
$(_this).addClass("show").find(".second-menu").animate({
width: 200
}, 500)
$(".second-menu", _this).animate({
marginLeft: 0
}, 500)
})

})
})

.first-menu, .second-menu {
padding: 0px;
margin: 0px;
list-style: none;
}

.first-menu, .second-menu-wrap {
position: relative;
background: #666;
}
.first-menu > li, .second-menu > li{
width:200px;
height:30px;
line-height: 2;
color: #fff;
border-bottom: 1px solid #333;
}
.first-menu{
width:200px;
}
.second-menu-wrap{
background: red;
position: absolute;
top: 0px;
left: 200px;
overflow: hidden;
}
.second-menu-wrap ul{
margin-left:-200px;
}
.second-menu-wrap.show ul{
margin: 0px;
}

{{el.name}}

{{elem.name}}