js扇形旋转菜单ui特效代码下载


js扇形旋转菜单ui特效代码下载
js扇形旋转菜单ui特效代码下载以及扇形旋转菜单ui等js/jquery网页特效代码下载。

1. HTML代码

<div class="menuHolder">
    <div class="menuWindow">
        <ul class="p1">
            <li class="s1"><a href="javascript:;">导航菜单</a>
                <ul id="p2" class="p2">
                    <li class="s2"><a href="javascript:;"><span>互联网网站资源管理</span></a>
                        <ul class="p3 a3">
                            <li><a href="javascript:;">打印</a></li>
                            <li><a href="javascript:;">编辑</a></li>
                            <li><a href="javascript:;">保管</a></li>
                        </ul>
                    </li>
                    <li class="s2"><a href="javascript:;"><span>移动互联网应用管理</span></a>
                        <ul class="p3 a3">
                            <li><a href="javascript:;">打印</a></li>
                            <li><a href="javascript:;">编辑</a></li>
                            <li><a href="javascript:;">保管</a></li>
                        </ul>
                    </li>
                    <li class="s2"><a href="javascript:;"><span>微信公众号监测</span></a>
                        <ul class="p3 a6">
                            <li><a href="javascript:;">支持</a></li>
                            <li><a href="javascript:;">销售</a></li>
                            <li><a href="javascript:;">购买</a></li>
                            <li><a href="javascript:;">摄影师</a></li>
                            <li><a href="javascript:;">零售商</a></li>
                            <li><a href="javascript:;">常规</a></li>
                        </ul>
                    </li>
                    <li class="s2"><a href="javascript:;"><span>信息安全风险监测</span></a>
                        <ul class="p3 a3">
                            <li><a href="javascript:;">南区</a></li>
                            <li><a href="javascript:;">北区</a></li>
                            <li><a href="javascript:;">中心区</a></li>
                        </ul>
                    </li>
                    <li class="s2"><a href="javascript:;"><span>协同联动</span></a>
                        <ul class="p3 a3">
                            <li><a href="javascript:;">邮箱</a></li>
                            <li><a href="javascript:;">邮递</a></li>
                            <li><a href="javascript:;">电话</a></li>
                        </ul>
                    </li>
                    <li class="s2 "><a href="javascript:;"><span>综合管理</span></a>
                        <ul class="p3 a5">
                            <li><a href="javascript:;">数码单反机身</a></li>
                            <li><a href="javascript:;">镜头</a></li>
                            <li><a href="javascript:;">闪光枪</a></li>
                            <li><a href="javascript:;">三角架</a></li>
                            <li><a href="javascript:;">过滤器</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<script>
    var menu = [
        {
            title: '互联网网站资源管理',
            subtitle: ['一级菜单', '二级菜单', '三级菜单']
        },
        {
            title: '移动互联网应用管理',
            subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
        },
        {
            title: '微信公众号监测',
            subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
        },
        {
            title: '信息安全风险监测',
            subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
        },
        {
            title: '协同联动',
            subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
        },
        {
            title: '综合管理',
            subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
        },
        {
            title: '智慧党建',
            subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
        },
        {
            title: '信息发布',
            subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
        },
        {
            title: '共享知识库',
            subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
        },
        {
            title: '共享知识库',
            subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
        }
    ]
    renderMenu(menu)
    function renderMenu(menu) {
        var lis = ''
        const deg = 90
        var p2 = document.getElementById('p2')
        for (var i = 0; i < menu.length; i++) {
            var sublis = ''
            var rotateDeg = deg / menu.length
            for (var j = 0; j < menu[i].subtitle.length; j++) {
                var subrotateDeg = deg / menu[i].subtitle.length
                var lineHeight = 600/menu[i].subtitle.length + 40
                sublis += '<li>' +
                    '<a style="transform: rotate(' + (subrotateDeg * j) + 'deg);line-height:'+lineHeight+'px" href="javascript:;">' +
                    '<span>' + menu[i].subtitle[j] + '</span>' +
                    '</a>' +
                    '</li>'
            }
            var ul = ' <ul class="p3 a' + menu[i].subtitle.length + '">' + sublis + '</ul>'
            lis += '<li class="s2">' +
                '<a style="transform: rotate(' + (rotateDeg * i) + 'deg);" href="javascript:;"><span>' + menu[i].title + '</span></a>' +
                '' + ul + '' +
                '</li>'
        }
        p2.innerHTML = lis
    }
</script>

相关推荐

发表评论

相关文章