jquery实现动态menu效果

最新推荐文章于 2024-04-08 08:50:19 发布

丰云

最新推荐文章于 2024-04-08 08:50:19 发布

阅读量2.3k

点赞数

分类专栏：前端应用文章标签： jquery menu

本文链接：https://blog.csdn.net/foren_whb/article/details/50008207

版权

前端应用专栏收录该内容

61 篇文章 0 订阅

订阅专栏

昨天写的一个用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>');
            }
        }
    });