导航菜单 gooey-menu jQuery液态融合(gooey)样式导航菜单插件(精)

gooey-menu是一款基于SVG过滤器的液态融合(gooey)样式导航菜单jQuery插件。通过该插件你可以非常轻松的制作出各种gooey样式的环形菜单特效。

这里写图片描述

查看原文

查看在线演示Demo和更多原文内容教程:http://www.ibloger.net/article/1799.html

使用方法
使用该导航菜单插件需要在页面中引入gooey.min.css文件,jquerygooey.min.js文件。

<link rel="stylesheet" href="gooey.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/gooey.min.js"></script>          

HTML结构

gooey样式的环形菜单的基本HTML结构是创建一个汉堡包图标,当用户点击汉堡包图标时打开菜单。

<nav id="gooey-upper">
  <input type="checkbox" class="menu-open" name="menu-open1" id="menu-open1"/>
  
黏贴效果的圆形菜单, 效果很逼真。项目地址:https://github.com/anshulagarwal2k/GooeyMenu 效果图:如何使用:首先你需要创建菜单项的数组<array name="drawable_array">         <item>@drawable/item_selector</item>         <item>@drawable/selector_video</item>         <item>@drawable/selector_audio</item>         <item>@drawable/selector_photo</item>         <item>@drawable/selector_doc</item>     </array>2. 创建菜单实例<android.anshul.com.gooeymenu.GooeyMenu>,并将上面的数组加到menu_drawable属性中:<android.anshul.com.gooeymenu.GooeyMenu         android:id="@ id/gooey_menu"         android:layout_width="match_parent"         android:layout_height="match_parent"         app:fab_radius="@dimen/big_circle_radius"         app:gap_between_menu_fab="@dimen/min_gap"         app:menu_radius="@dimen/small_circle_radius"         app:no_of_menu="5"         app:menu_drawable="@array/drawable_array"/>3. 位菜单添加监听mGooeyMenu = (GooeyMenu) findViewById(R.id.gooey_menu); mGooeyMenu.setOnMenuListener(new GooeyMenu.GooeyMenuInterface(){ @Override public void menuOpen() { showToast("菜单打开了"); } @Override public void menuClose() { showToast( "菜单关闭了"); } @Override public void menuItemClicked(int menuNumber) { showToast( "你选择了某一菜单项 : "   menuNumber); }                  });
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值