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="http://static.zzyzan.com/qiniu/8410/image/fbca6a781e7d86aeb0f270bcbd93b870.jpg" alt="">
      </a>
    </li>
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="http://static.zzyzan.com/qiniu/8410/image/ece0c664e19ad01c0cc365de49ebdf4c.jpg" alt="">
      </a>
    </li>
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="http://static.zzyzan.com/qiniu/8410/image/5c166ae666456871f091f7977f89b126.jpg" alt="">
      </a>
    </li>
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="http://static.zzyzan.com/qiniu/8410/image/a7c42ce9e2fe13623bf141eb1e31d98f.jpg" alt="">
      </a>
    </li>
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="http://static.zzyzan.com/qiniu/8410/image/0d7beebfecdd1f5ec3846d46b56ca5f7.jpg" 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) 吐槽 (15)
  • 版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容, 欢迎发送邮件至 postmaster@zzyzan.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
  • 本作品是由 小乖乖资源共享网 会员 时间的灰烬 的投递作品。
  • 欢迎转载,但请务必注明来源地址:http://www.zzyzan.com/web/nav/8410.html

- 评论

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