一个非常简单简洁的自适应导航栏

HTML结构

<div class="nav">
    <span class="nav-on"><i></i><i></i><i></i></span>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">栏目一</a></li>
        <li><a href="#">栏目二</a></li>
    </ul>
</div>

JS代码

$(".nav-on").click(function() {
    $(".nav > ul").slideToggle();
});

CSS代码

.nav {
    line-height: 50px;
    background: #0099cc;
    position: relative;
}

.nav li {
    float: left;
}

.nav li a {
    display: block;
    padding: 0 20px;
    color: #fff;
}

.nav span.nav-on {
    display: none;
    width: 20px;
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
}

.nav-on i {
    display: block;
    width: 100%;
    height: 5px;
    background: #fff;
    margin-bottom: 5px;
}

/* 手机端CSS代码 */
@media screen and (max-width: 768px) {
    .nav ul {
        display: none;
        width: 100%;
    }

    .nav ul li {
        width: 100%;
    }

    .nav span.nav-on {
        display: block;
    }
}