今天教大家实现一款仿安卓(Android)按钮菜单效果的可变色菜单。同时还有一个类似手机悬浮球的管理菜单效果。
实现该菜单，我们需要借助jQuery Tab菜单插件。它还jQueryTabs插件不同，jQuery Tab菜单插件更多的是借助CSS3来实现。
jQuery Tab菜单插件支持选项卡功能，并且可以滑动翻页。下面是本文教要实现的demo的运行效果：
相关实现代码如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jQuery Tab菜单插件DEMO演示</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.min.css">
<link rel='stylesheet prefetch'
href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="snap">
<div class="tab-panel">
<div class="tab"><i class="material-icons">textsms</i></div>
<div class="tab"><i class="material-icons">refresh</i>
<div class="camera"></div>
</div>
<div class="tab"><i class="material-icons">sort</i></div>
</div>
<div class="active"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>
<!-- ：www.xttblog.com -->
<script src='js/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
所有代码已共享到百度云，下载链接：http://pan.baidu.com/s/1eRT2SOa 密码：4rf3
： » jQuery Tab菜单插件仿Android手机底部菜单悬浮球效果
原创文章，作者：端木书台，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251327.html