dowebok

jQuery自适应宽度导航插件Horizo​​ntalNav

分类:代码 日期: 点击(12,372) 下载(1) 来源:未知 收藏

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({});
});

演 示 下 载

演 示 下 载

关注dowebok公众号

标签:

相关文章

下载:jQuery自适应宽度导航插件Horizo​​ntalNav
jQuery自适应宽度导航插件Horizo​​ntalNav
城通网盘 百度网盘 本地下载

百度网盘密码: