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 相关文章推荐
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
动态加载jQuery的方法
Jun 16 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python中特殊函数集锦
2015/07/27 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python实现名片管理系统项目
2019/04/26 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
Django 返回json数据的实现示例
2020/03/05 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
几个Shell Script面试题
2012/08/31 面试题
企业门卫岗位职责
2013/12/12 职场文书
人事档案接收函
2014/01/12 职场文书
2015年统战工作总结
2015/05/19 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书