效果预览网址：http://keleyi.com/keleyi/phtml/jqmenu/index.htm

支持IE、Chrome、火狐等浏览器

完整源代码，保存到HTML文件打开也可查看效果：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jq倾斜的动画导航菜单-柯乐义</title><base target="_blank" />
  6. <style type="text/css">
  7. *{margin:0;padding:0;list-style-type:none;}
  8. a,img{border:0;text-decoration:none;}
  9. body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#E8E8E8;}
  10. .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
  11. .clearfix{display:inline-table;}/* Hides from IE-mac \*/
  12. *html .clearfix{height:1%;}
  13. .clearfix{display:block;}/* End hide from IE-mac */
  14. *+html .clearfix{min-height:1%;}
  15. /* keleyimenu 柯 乐 义 */
  16. .keleyimenu{width:355px;background:url(http://keleyi.com/keleyi/phtml/jqmenu/index/nav-bg.png) no-repeat;}
  17. .keleyimenu ul{margin:0 0 0 42px;}
  18. .keleyimenu ul li{width:164px;height:29px;padding-bottom:8px;overflow:hidden;position:relative;float:left;display:inline;}
  19. .keleyimenu ul li a{display:block;width:164px;height:29px;line-height:26px;font-family:"微软雅黑";font-size:16px;color:#FFFFFF;text-indent:62px;overflow:hidden;position:relative;z-index:100000;}
  20. .keleyimenu ul li p{position:absolute;z-index:100;top:0;left:-164px;width:164px;height:29px;background:url(http://keleyi.com/keleyi/phtml/jqmenu/index/nav-libg.png) no-repeat; }
  21. .keleyimenu ul li b{position:absolute;z-index:100000;top:0;left:0;display:block;width:11px;height:29px;background:url(http://keleyi.com/keleyi/phtml/jqmenu/index/nav-jiao2.png) no-repeat;}
  22. .keleyimenu ul li.current p{left:0;}
  23. .keleyimenu ul li.current a{color:#0072d2;}
  24. </style>
  25. <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
  26. </head>
  27. <body>
  28. <div class="keleyimenu">
  29. <ul class="clearfix">
  30. <li class="current"><a href="http://keleyi.com/a/bjac/4pdfle7v.htm" >原文</a></li>
  31. <li><a href="http://keleyi.com/menu/cms/" >CMS</a></li><li><a href="http://keleyi.com/menu/net/" >.NET</a></li><li><a href="http://keleyi.com/menu/javascript/" >Javascript</a></li><li><a href="http://keleyi.com/menu/jquery/" >jQuery</a></li><li><a href="http://keleyi.com/menu/csharp/" >C#</a></li><li><a href="http://keleyi.com/menu/aspnet/" >ASP.NET</a></li><li><a href="http://keleyi.com/menu/mvc/" >MVC</a></li><li><a href="http://keleyi.com/menu/html5/" >HTML5</a></li>
  32. <li><a href="http://keleyi.com/dev/3068696139522ae4.htm">树形菜单</a></li>    </ul>
  33. </div>
  34.  
  35. <script type="text/javascript">
  36. $(function () {
  37. $(".ke"+"leyimenu ul li").append("<b class='pngFix'></b><p class='pngFix'></p>");
  38.  
  39. $(".keleyimenu ul li").hover(function () {
  40. if ($(this).attr("class") != "current") {
  41. $(this).children("p").stop().animate({ left: "0px" }, 200);
  42. $(this).children("a").css({ color: "#0072d2" }, 900);
  43. }
  44. }, function () {
  45. if ($(this).attr("class") != "current") {
  46. $(this).children("p").stop().animate({ left: "-164px" }, 300);
  47. $(this).children("a").css({ color: "#FFFFFF" }, 900);
  48. }
  49. });
  50.  
  51. $(".kele"+"yimenu ul li.current").unbind("hover");
  52. });
  53.  
  54. $(function ($) {
  55. var left = 0;
  56. var length = $(".keleyimenu li").length;
  57. for (length; length > 0; length--) {
  58. left += 12.60;
  59. $(".keleyimenu li").eq(length - 1).css("margin-left", left)
  60. }
  61. });
  62.  
  63. function setNav(id) {
  64. var navList = $(".keleyimenu ul li");
  65. $(navList).eq(id - 1).addClass("current");
  66. }
  67. </script>
  68. </body>
  69. </html>

这代码中用到了jquery的eq函数，详细请参考：http://keleyi.com/a/bjac/tmx4mq76.htm

菜单大全：http://keleyi.com/a/bjac/veugsmw9.htm

原文：http://keleyi.com/a/bjac/4pdfle7v.htm

jq倾斜的动画导航菜单的更多相关文章

  1. jquery倾斜的动画导航菜单

    1. [代码]完整源代码  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  2. 一款基jquery超炫的动画导航菜单

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览   ...

  3. 纯css实现Magicline Navigation(下划线动画导航菜单)

    看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...

  4. 通过css3实现的动画导航菜单代码

    用css3样式实现的滑动导航菜单,html代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &quo ...

  5. 纯css3实现的动画导航菜单

    测试咯 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特 ...

  6. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

  7. JavaScript实战（带收放动画效果的导航菜单）

    虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏福:http://www. ...

  8. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  9. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

随机推荐

  1. FreeBSD_11-系统管理——{Part_8 - IPFW}

    内核支持 方式一:静态編译进内核 options IPFIREWALL # enables IPFW options IPFIREWALL_VERBOSE # enables logging for ...

  2. iOS-SDWebimage底层实现原理

    其实有些框架的实现原理,并没有想象中那么难,思想也很简单,主要是更新第三方框架的作者对自己写的代码,进行了多层封装,使代码的可读性降低,也就使得框架看起来比较难.我来实现以下SDWebimage的的曾 ...

  3. 使用 fixed role 授予权限

    今天下午,Leader 发mail给我,要求授予某个User对数据库只读的权限. Step1,在SQL Server中为该用户创建一个Login和User,在创建User时,建立Login 和 Use ...

  4. ELF文件

    ELF文件格式是一个开发标准,各种UNIX系统的可执行文件都采用ELF格式,它有三种不同的类型: 可重定位的目标文件 可执行文件 共享库 现在分析一下上一篇文章中经过汇编之后生成的目标文件max.o和 ...

  5. 网络连接详细信息出现两个自动配置ipv4地址

    问题:网络连接详细信息出现两个自动配置ipv4地址,一个是有效地址,一个是无效地址. 解决办法:先将本地连接ip设置成自动获取,然后点击开始——>运行——>输入cmd,回车,进入命令行界面 ...

  6. 【开源】OSharp框架解说系列（5.1）：EntityFramework数据层设计

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  7. 配置 DHCP 服务 - 每天5分钟玩转 OpenStack（89）

    前面章节我们看到 instance 在启动过程中能够从 Neutron 的 DHCP 服务获得 IP,本节将详细讨论其内部实现机制. Neutron 提供 DHCP 服务的组件是 DHCP agent ...

  8. 【原生态】Http请求数据 与 发送数据

    今天项目组小弟居然问我怎么用java访问特定的地址获取数据和发送请求 Http请求都是通过输入输出流来进行操作的,首先要制定GET或者POST,默认是GET,在安全和数据量较大情况下请使用post 根 ...

  9. UWP开发之Mvvmlight实践四：{x:bind}和{Binding}区别详解

    {x:bind}是随着UWP被推出而被添加的,可以说是Win10 UWP开发专有扩展.虽然 {x:Bind} 缺少{Binding} 中的一些功能,但它运行时所花费的时间和使用的内存量均比 {Bind ...

  10. C语言 第一章 C语言简介

    一.C语言介绍 C是一种通用的编程语言,广泛用于系统软件与应用软件的开发.于1969年至1973年间,为了移植与开发UNIX操作系统,由丹尼斯·里奇与肯·汤普逊,以B语言为基础,在贝尔实验室设计.开发 ...