效果预览网址：http://keleyi.com/keleyi/phtml/jqmenu/index.htm
支持IE、Chrome、火狐等浏览器
完整源代码，保存到HTML文件打开也可查看效果：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jq倾斜的动画导航菜单-柯乐义</title><base target="_blank" /> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;text-decoration:none;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#E8E8E8;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-table;}/* Hides from IE-mac */ *html .clearfix{height:1%;} .clearfix{display:block;}/* End hide from IE-mac */ *+html .clearfix{min-height:1%;} /* keleyimenu 柯 乐 义 */ .keleyimenu{width:355px;background:url(http://keleyi.com/keleyi/phtml/jqmenu/index/nav-bg.png) no-repeat;} .keleyimenu ul{margin:0 0 0 42px;} .keleyimenu ul li{width:164px;height:29px;padding-bottom:8px;overflow:hidden;position:relative;float:left;display:inline;} .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;} .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; } .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;} .keleyimenu ul li.current p{left:0;} .keleyimenu ul li.current a{color:#0072d2;} </style> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> </head> <body> <div class="keleyimenu"> <ul class="clearfix"> <li class="current"><a href="http://keleyi.com/a/bjac/4pdfle7v.htm" >原文</a></li> <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> <li><a href="http://keleyi.com/dev/3068696139522ae4.htm">树形菜单</a></li> </ul> </div> <script type="text/javascript"> $(function () { $(".ke"+"leyimenu ul li").append("<b class='pngFix'></b><p class='pngFix'></p>"); $(".keleyimenu ul li").hover(function () { if ($(this).attr("class") != "current") { $(this).children("p").stop().animate({ left: "0px" }, 200); $(this).children("a").css({ color: "#0072d2" }, 900); } }, function () { if ($(this).attr("class") != "current") { $(this).children("p").stop().animate({ left: "-164px" }, 300); $(this).children("a").css({ color: "#FFFFFF" }, 900); } }); $(".kele"+"yimenu ul li.current").unbind("hover"); }); $(function ($) { var left = 0; var length = $(".keleyimenu li").length; for (length; length > 0; length--) { left += 12.60; $(".keleyimenu li").eq(length - 1).css("margin-left", left) } }); function setNav(id) { var navList = $(".keleyimenu ul li"); $(navList).eq(id - 1).addClass("current"); } </script> </body> </html>
这代码中用到了jquery的eq函数，详细请参考：http://keleyi.com/a/bjac/tmx4mq76.htm
菜单大全：http://keleyi.com/a/bjac/veugsmw9.htm