jQuery自适应宽度导航插件HorizontalNav
HorizontalNav 是一个 jQuery 导航插件，能够自适应容器的宽度。如果你曾经在一个项目中创建过这种效果，你就会知道，这是很难处理的，但这个插件很容易，并且支持 IE6、IE7。
使用方法
HTML
<nav class="horizontal-nav full-width horizontalNav-notprocessed"> <ul> <li><a href="#">首页</a></li> <li><a href="#">工作</a></li> <li><a href="#">博客</a></li> <li><a href="#">关于我</a></li> <li><a href="#">联系我们</a></li> </ul> </nav>
CSS
.horizontal-nav {
background: #efefef;
border-radius: 6px;
}
.horizontal-nav ul {
background: #128F9A;
float: left;
text-align: center;
border-radius: 6px;
border: 1px solid #0e7079;
}
.horizontal-nav ul li {
float: left;
border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
border-left: 0 none;
}
.horizontal-nav ul li a {
display: block;
padding: 10px 20px;
color: #fff;
border-top: 1px solid rgba(255,255,255, 0.25);
border-left: 1px solid rgba(255,255,255, 0.25);
}
.horizontal-nav ul li:first-child a {
border-left: 0 none;
}
.horizontal-nav ul li a:hover {
background: #12808a;
}
.horizontal-nav ul li:first-child a {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
JavaScript
$(function(){
$('.full-width').horizontalNav({});
});
标签：jQuery插件
