JS+CSS实现仿支付宝菜单选中效果代码


Posted in Javascript onSeptember 25, 2015

本文实例讲述了JS+CSS实现仿支付宝菜单选中效果代码。分享给大家供大家参考。具体如下:

这是一个漂亮的JS+CSS仿支付宝菜单,总体风格和形式与支付宝的菜单没什么两样,细心会发现这是一个CSS爱好者自己手功完成的,自己美化图片,重写CSS代码,为作者给我们奉献这么好的菜单而表示感谢。

运行效果截图如下:

JS+CSS实现仿支付宝菜单选中效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS仿支付宝菜单</title>
<style type="text/css">
* { padding:0px; margin:0px; list-style:none; }
body { font-size:14px; font-family:Verdana; }
#nav ul.nav_left, #nav ul.nav_right, #nav ul.nav_main li, #nav ul.nav_main li.over a, #nav ul.nav_main li a span, #nav ul.nav_main li.over a span { background:url(images/b.gif) no-repeat; }
#nav { background:url(images/b.gif) repeat-x; }
#wrap { width:960px; margin:0 auto; height:auto; overflow:hidden; padding-top:50px; }
#nav { background-position: 0 -178px; height:79px; width:960px; }
#nav ul.nav_left { background-position: 0 0; float:left; width:10px; height:79px; display:inline; }
#nav ul.nav_right { background-position:-20px 0; float:right; width:10px; height:79px; display:inline; }
#nav ul.nav_main { float:left; display:inline; }
#nav ul.nav_main li { background-position: -41px 0; float:left; padding:0 5px; }
#nav ul.nav_main li a { height:40px; display:block; text-decoration:none; float:left; }
#nav ul.nav_main li.over a { background-position: 0 -85px; }
#nav ul.nav_main li a span { background-position: right -90px; height:22px; display:block; padding-right:30px; padding-left:20px; padding-top:18px; color:#fff; font-weight:bold; overflow:hidden; cursor:pointer; float:left; margin-left:15px; display:inline; }
#nav ul.nav_main li.over a span { background-position: right -130px; color:#555; }
#nav ul.nav_main li#show_0 { background:none; }
</style>
<script type="text/javascript">
function $(id) {
 return document.getElementById(id);
}
window.onload = function() {
 var Root = $("nav_li").getElementsByTagName("li");
 for (var i = 0; i < Root.length; i++) {
  c = Root[i];
  c.setAttribute("id", "show_" + i);
  var xp = function(i) {
   show(i);
  };
  c.onmouseover = dete_bibao(xp, i, c);
 }
}
function show(j) {
 for (var n = 0; n <= 6; n++) {
  if ($("show_" + n).className != "s") {
   $("show_" + n).className = "s";
  }
  if (n == j) {
   $("show_" + n).className = "over";
  }
 }
}
function dete_bibao(fn, params, obj) {
 return function() {
  fn.call(obj || window, params);
 }
}
</script>
</head>
<body>
<div id="wrap">
 <div id="nav">
  <ul class="nav_left">
  </ul>
  <ul class="nav_main" id="nav_li">
   <li><a href="#"><span>首页</span></a></li>
   <li><a href="#"><span>脚本代码</span></a></li>
   <li><a href="#"><span>脚本下载</span></a></li>
   <li><a href="#"><span>网页特效</span></a></li>
   <li><a href="#"><span>生活社区</span></a></li>
   <li><a href="#"><span>休闲电影</span></a></li>
   <li><a href="#"><span>哈哼~</span></a></li>
  </ul>
  <ul class="nav_right">
  </ul>
 </div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 #Javascript
10个很棒的jQuery代码片段
Sep 24 #Javascript
JS模拟实现Select效果代码
Sep 24 #Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 #Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 #Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 #Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 #Javascript
You might like
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
详解python播放音频的三种方法
2019/09/23 Python
基于python图像处理API的使用示例
2020/04/03 Python
天巡全球:Skyscanner Global
2017/06/20 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
党支部书记岗位责任制
2014/02/11 职场文书
文明城市创建标语
2014/06/16 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
诉讼和解协议书
2016/03/23 职场文书
辞职申请书范本
2019/05/20 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书