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 相关文章推荐
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
JavaScript表单验证开发
Nov 23 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
PHP 数组教程 定义数组
2009/10/23 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
php 生成短网址原理及代码
2014/01/23 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
vue组件name的作用小结
2018/05/23 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
六个窍门助你提高Python运行效率
2015/06/09 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Django实现随机图形验证码的示例
2020/10/15 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
创业资金计划书
2014/02/06 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
2014年就业工作总结
2014/11/26 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
聘任通知书
2015/09/21 职场文书