导航菜单

兼容IE8圆形弹出按钮菜单代码

阿里云

这是一款兼容 ie8 的 jquery 圆形弹出按钮菜单插件。该插件可以制作点击菜单主按钮,弹出一圈子按钮的效果。

使用方法:

在页面中引入 jquery 和 expandableOptions.js 文件和样式文件 expandableOptions.css。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="css/expandableOptions.css">
  2. <script src="path/to/jquery.js"></script>
  3. <script src="path/to/jexpandableOptions.js"></script>

HTML 结构:

使用是创建下面的 HTML 结构。

  1. <div class="expandableContainer">
  2.   <ul id="optionsThreeId" class="expandableOptions">
  3.     <li class="option" onclick="alert('option 1 clicked');" title="option 1" option-image="one.png"></li>
  4.     <li class="option" onclick="alert('option 2 clicked');" title="option 2" option-image="two.png"></li>
  5.     <li class="option" onclick="alert('option 3 clicked');" title="option 3" option-image="three.png"></li>
  6.     <li class="option" onclick="alert('option 4 clicked');" title="option 4" option-image="four.png"></li>
  7.     <li class="option" onclick="alert('option 5 clicked');" title="option 5" option-image="five.png"></li>
  8.     <li class="option" onclick="alert('option 6 clicked');" title="option 6" option-image="six.png"></li>
  9.   </ul>
  10. </div>

初始化插件:

在页面 DOM 元素加载完毕之后,通过下面方法来初始化该插件。

  1. $(document).ready(function () {
  2.  
  3.   $(".expandableOptions").ggExpandable({
  4.  
  5.     // default: "./"
  6.     imagesPath: "./img/",
  7.  
  8.     // default: ""
  9.     expandImage: "noname.png"
  10.   });
  11.  
  12. });

该兼容 ie8 的 jquery 圆形弹出按钮菜单插件的 github 地址为:https://github.com/GGaritaJ/ggExpandableOptions

兼容 IE8 圆形弹出按钮菜单代码

已有 353 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!