jquery圆形菜单

基础概念

jQuery圆形菜单是一种基于jQuery库实现的交互式菜单，它以圆形布局展示菜单项，通常用于创建简洁、美观且用户友好的导航界面。这种菜单可以通过鼠标悬停或点击来展开和收起子菜单项。

类型

静态圆形菜单：菜单项固定显示，没有子菜单。
动态圆形菜单：菜单项可以展开显示子菜单项。
动画圆形菜单：菜单项展开和收起时有动画效果。

应用场景

网站导航
应用程序界面
仪表盘
游戏界面

示例代码

以下是一个简单的jQuery圆形菜单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Circular Menu</title>
    <style>
        .circular-menu {
            width: 200px;
            height: 200px;
            position: relative;
            margin: 50px auto;
        }
        .menu-item {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 50%;
            background-color: #3498db;
            color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: 50% 100px;
            transition: transform 0.3s ease-in-out;
        }
        .menu-item:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="circular-menu">
        <div class="menu-item" data-menu="item1">1</div>
        <div class="menu-item" data-menu="item2">2</div>
        <div class="menu-item" data-menu="item3">3</div>
        <div class="menu-item" data-menu="item4">4</div>
        <div class="menu-item" data-menu="item5">5</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.menu-item').hover(function() {
                var index = $(this).index();
                var angle = index * (360 / $('.menu-item').length);
                $(this).css('transform', 'rotate(' + angle + 'deg)');
            });
        });
    </script>
</body>
</html>