有个性的jquery导航效果

有个性的jquery水平滑动导航效果，效果跟本站首页导航一样。

1，加载jquery库。

2，加载jquery-ui.min.js和jquery.spasticNav.js文件。

3，HTML代码部分：

[code]<ul id=”menu”>
<li id=”menu-item-402″><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>More About My Portfolio</a></li>
<li><a href=”#”>Contact</a></li>
</ul>[/code]

4，最后加载

[code]<script type=”text/javascript”>
$(‘#menu’).spasticNav();
</script>[/code]

5，样式代码：

[code]ul, li {
margin: 0; padding: 0;
}

#blob {

border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;

}

#menu {
position: relative;
background: #292929;
float: left;
}

#menu li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 1px solid black;
}

#menu li a {
color: #e3e3e3;
position: relative;
z-index: 2;
float: left;
font-size: 30px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 30px 45px;
}[/code]