jQuery倾斜的动画导航菜单

效果预览网址: 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">[url=http://keleyi.com/a/bjac/4pdfle7v.htm]原文[/url]</li>
[*][url=http://keleyi.com/menu/cms/]CMS[/url]
[*][url=http://keleyi.com/menu/net/].NET[/url]
[*][url=http://keleyi.com/menu/javascript/]Javascript[/url]
[*][url=http://keleyi.com/menu/jquery/]jQuery[/url]
[*][url=http://keleyi.com/menu/csharp/]C#[/url]
[*][url=http://keleyi.com/menu/aspnet/]ASP.NET[/url]
[*][url=http://keleyi.com/menu/mvc/]MVC[/url]
[*][url=http://keleyi.com/menu/html5/]HTML5[/url]

[*][url=http://keleyi.com/dev/3068696139522ae4.htm]树形菜单[/url]
    </ul>
</div>

<script type="text/javascript">
$(function () {
$(".ke"+"leyimenu ul li").append("<b class='pngFix'></b>");

$(".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

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

你可能感兴趣的:(JavaScript,jquery,css,菜单,jQuery特效)