引领创新的CSS圆形飞出导航菜单

这款CSS Circle Fly-Out Navigation是一个优雅而富有创意的开源组件，由CSS3构建而成。通过此处的演示，您可以立即体验其独特魅力。

使用方法

要使用该组件，只需将CSS和JavaScript引入到您的应用程序中。以下是如何进行标记的示例：

<nav class="c-circle-menu js-menu">
  <button class="c-circle-menu__toggle js-menu-toggle">
    <span>Toggle</span>
  </button>
  <ul class="c-circle-menu__items">
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="path/to/icon" alt="">
      </a>
    </li>
    <!-- 更多项目在这里 -->
  </ul>
  <div class="c-circle-menu__mask js-menu-mask"></div>
</nav>

然后，添加脚本文件如下：

<script src="path/to/circleMenu.min.js"></script>

最后，初始化菜单：

<script>
  var el = '.js-menu';
  var myMenu = cssCircleMenu(el);
</script>

默认状态下，菜单项为5个。若需更改数量，您可以通过Sass和Gulp配置并构建。

直接使用

您可以从css/目录下载未压缩或压缩的文件直接使用。

作为Bower组件

该组件也可在Bower上找到，安装命令如下：

bower install css-circle-menu

通过Sass和Gulp自定义配置

该项目基于Sass（SCSS）构建，并使用JavaScript模块处理事件。整个过程都可通过Gulp编译。要开发和编译，请运行：

npm install
gulp

在开发过程中，可以使用以下命令实时监控文件变化：

gulp watch

使用Gulp工作流程能极大地提升效率，便于定制。即使不使用Gulp编译Sass，也需要利用Compass来应用数学辅助函数。在Sass中有11个可配置变量，供您自由调整：

// $menu-item-radius: 48px;                  //1
// $num-items: 5;                            //2
// $menu-theme-color: rgb(255, 40, 60);      //3
// $spread-radius: 144px;                    //4
// $delay-increment: 0.1s;                   //5
// $menu-position: "bottom-right";           //6
// $mq-height: 480px;                        //7
// $mq-width: 480px;                         //8
// $button-bar-height: 4px;                  //9
// $button-bar-spacing: 4px;                 //10
// $button-lr-padding: 10px;                 //11

这些变量包括：

1. 菜单项半径。
2. 菜单项的数量。
3. 主题颜色。
4. 伸展半径，即菜单项从中心点分散的距离。
5. 延迟增量，在每个菜单项离开或返回中心点之间的延迟时间。
6. 菜单的位置，可以选择以下四个值：
   • bottom-right - 底部右角（默认）
   • bottom-left - 底部左角
   • top-left - 顶部左角
   • top-right - 顶部右角
7. 使菜单增大尺寸的最小高度。
8. 使菜单增大尺寸的最小宽度。
9. 切换按钮条的高度。
10. 切换按钮条之间的间距。
11. 切换按钮容器与条之间的左右内边距。

其他的变量可以在Sass中根据需求进一步自定义。记得在更改菜单项数目的Sass变量。

许可证与版权

该组件遵循MIT许可协议，并且由Call Me Nick版权所有。

探索创新的交互体验，CSS Circle Fly-Out Navigation是您网页设计的不二之选。立即加入我们，一同挖掘它的无限可能吧！