昨天写的一个用jquery实现的动态加载的menu效果,记录下来,以便参考
<ul class="menu-ul"></ul>
var menuList = [
{
label: 'Food',
action: 'javascript:void(0);',
items: [
{
label: 'Recipe Repertoire',
action: 'Recipe'
},
{
label: 'Food',
action: 'Food'
}
]
},
{
label: 'Fitness',
action: 'javascript:void(0);',
items: [
{
label: 'AAA',
action: 'javascript:void(0);',
},
{
label: 'BBB',
action: 'javascript:void(0);',
}
]
},
{
label: 'Lifestyle',
action: 'javascript:void(0);',
items: [
{
label: 'AAA',
action: 'javascript:void(0);',
},
{
label: 'BBB',
action: 'javascript:void(0);',
}
]
}
];
$(function () {
var selectItem = 'Recipe';
for (var i = 0; i < menuList.length; i++) {
var menu = menuList[i];
var li = $('<li class="menu-li"><a href="' + menu.action + '">' + menu.label + '</a></li>');
$('.menu-ul').append(li);
if (menu.label == selectItem) {
li.addClass('menu-li-selected');
}
if (menu.items.length > 0) {
var ul = $('<ul class="menu-second-ul"></ul>');
li.append(ul);
for (var j = 0; j < menu.items.length; j++) {
var child = menu.items[j];
ul.append('<li><a href="' + child.action + '">' + child.label + '</a></li>');
}
}
li.on('mouseenter', function () {
$(this).find("ul").animate({ "opacity": "0.75", "height": "auto !important", "min-height": "100px" }, "slow", function () {})
}).on('mouseleave', function () {
$(this).find("ul").animate({ "opacity": "0", "height": "0" });
});
if (i < (menuList.length - 1)) {
$('.menu-ul').append('<li class="menu-li-splitbar"></li>');
}
}
});