鼠标悬停扇形打开菜单

效果展示

代码示例

<style>
body {
  position: relative;
  margin: 0;
  padding: 0;
  color: #000;
  background-color: #F7F8F8;
}
.menuHolder {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid #0095da;
  border-top: none;
  border-left: none;
}
.menuHolder ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.menuHolder ul li {
  border-radius: 0 0 300px 0;
  width: 0;
  height: 0;
}
.menuHolder ul li a {
  color: #000;
}
.menuHolder ul.p1 li {
  position: absolute;
  left: 0;
  top: 0;
}
.menuHolder li.s1>a {
  position: absolute;
  display: block;
  width: 200px;
  height: 200px;
  background: #01040c url(img/btn-active_menu.png) no-repeat 44px 44px;
  border-radius: 0 0 200px 0;
}
.menuHolder:hover .s1>a {
  background: #1040c url(img/btn_memu.png) no-repeat 44px 44px;
}
.menuHolder li.s2>a {
  position: absolute;
  display: block;
  width: 200px;
  height: 400px;
  background: #0b2433;
  border-radius: 0 0 400px 0;
  font-size: 16px;
  color: #306c92;
}
.menuHolder ul.p3 li a {
  position: absolute;
  display: block;
  width: 200px;
  padding-left: 400px;
  height: 600px;
  line-height: 200px;
  border-right: 1px solid #8acb;
  color: #306c92;
  font-size: 16px;
}
.menuHolder ul ul {
  transform-origin: 0 0;
  transform: rotate(90deg);
  transition: 1s;
}
.menuHolder li.s2:nth-of-type(6)>a {
  transform: rotate(75deg);
}
.menuHolder li.s2:nth-of-type(5)>a {
  transform: rotate(60deg);
}
.menuHolder li.s2:nth-of-type(4)>a {
  transform: rotate(45deg);
}
.menuHolder li.s2:nth-of-type(3)>a {
  transform: rotate(30deg);
}
.menuHolder li.s2:nth-of-type(2)>a {
  transform: rotate(15deg);
}
.menuWindow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  background: url(img/bg-active_mue.png) no-repeat right top;
  background-size: 70%;
  transition: 0s 1s;
}
.menuHolder:hover .menuWindow {
  width: 610px;
  height: 610px;
  overflow: hidden;
  transition: 0s 0s;
}
.menuHolder span {
  display: block;
}
.menuHolder~img.close {
  width: 0;
  height: 0;
  position: fixed;
  z-index: -1;
  left: 0;
  top: 0;
}
.menuHolder:hover~img.close {
  width: 100%;
  height: 100%;
}
.p3 span {
  transform: rotate(12deg);
}
</style>

<div class="menuHolder">
    <div class="menuWindow">
        <ul class="p1">
            <li class="s1"><a href="javascript:;">导航菜单</a>
                <ul id="p2" class="p2"></ul>
            </li>
        </ul>
    </div>
</div>

<script setup>
    var menu = [
        {
            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>