JavaScript和CSS3制作的径向弹出菜单—circleMenu

JavaScript和CSS3制作的径向弹出菜单—circleMenu

circleMenu是一个简单的,轻量级的,不依赖任何JavaScript库的径向弹出菜单插件,可以帮助你在Web应用程序创建一个全屏覆盖径向弹出菜单。它使用了CSS3的变换和菜单动画过渡平滑效果。

使用方法

在html页面中添加样式表circle-menu.css和circle-menu.js

<link href="css/circle-menu.css" rel="stylesheet">
<script src="js/src/circleMenu.js"></script>

径向导航菜单的HTML结构

<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="img/house.svg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" alt="">
      </a>
    </li>
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="img/photo.svg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" alt="">
      </a>
    </li>
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="img/pin.svg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" alt="">
      </a>
    </li>
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="img/search.svg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" alt="">
      </a>
    </li>
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="img/tools.svg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" alt="">
      </a>
    </li>
  </ul>
  <div class="c-circle-menu__mask js-menu-mask"></div>
</nav>

初始化circleMenu

var el = '.js-menu';
var myMenu = cssCircleMenu(el);
打赏
下载 在线预览 积分 (-2) 吐槽 (13)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽