SOURCE

$(function(){

    var nav = {
        menuBtn: $('.menuBtn'),
        nav: $('.js-nav'),
        menu: $('.nav'),
        menuLi: $('.nav li'),
        menuLink: $('.nav li > a'),
        init: function () {
            var _this = this;
            this.menuBtn.append('<span></span>');
            this.menuBtn.on('click', function() {
                $(this).toggleClass('open');
                _this.nav.toggleClass('open');
            });
            this.resize(959);
        },
        resize: function (width) {
            this.menuLink.off('click');
            this.menu.find('.sub').stop(true,true).slideUp(0);
            this.menuLink.on('click', function() {
                if ($(this).siblings('.sub').length) {
                    $(this).siblings('.sub').stop(true,true).slideToggle(300).parent().siblings().find('.sub').stop(true,true).slideUp(300);
                    return false;
                }
            })
        }
    };

    nav.init();

})

<!-- 1 -->
<div class="header-placeholder"></div>
<div class="header fixed">
    <div class="menuBtn"><span></span></div>
    <div class="hdr js-nav down">
        <div class="so">
            <form action="">
                <input type="text" class="inp"><!--
                --><input type="submit" class="btn" value="搜索">
            </form>
        </div>
        <ul class="nav">
            <li><a href="">一级导航</a></li>
            <li>
                <a href="">一级导航</a>
                <dl class="sub">
                    <dd><a href="">二级导航</a></dd>
                    <dd><a href="">二级导航</a></dd>
                    <dd><a href="">二级导航</a></dd>
                </dl>
            </li>
            <li>
                <a href="">一级导航</a>
                <dl class="sub">
                    <dd><a href="">二级导航</a></dd>
                    <dd><a href="">二级导航</a></dd>
                    <dd><a href="">二级导航</a></dd>
                </dl>
            </li>
        </ul>
    </div>
    <a href="" class="l logo">
        <img src="http://www.5811.com.cn/images/ico-xcx.png" alt="" />
    </a>
    <h1 class="c">页面标题</h1>
</div>


<!-- 2. 不需要 js -->
<div style="height: 100px;"></div>
<div class="header">
    <a href="" class="l">后退</a>
    <h1 class="c">页面标题</h1>
    <div class="r">
        <a href="" class="txt">文本</a>
        <a href="" class="icon">&nbsp;</a>
        <a href="" class="icon txt">图标文本</a>
    </div>
</div>


<!-- 3. 不需要 js -->
<div style="height: 50px;"></div>
<div class="header">
    <a href="" class="l">&nbsp;</a>
    <h1 class="c">页面标题</h1>
    <div class="r">
        <a href="" class="icon">&nbsp;</a>
    </div>
</div>

/* 吸顶导航占位 */
.headbar-placeholder { height: 45px; }
/* 导航 */
.header { position: relative; width: 100%; height: 44px; line-height: 1; border-bottom: 1px solid #03a9f4; background: #03a9f4; }
    /* 吸顶导航 */
    .header.fixed { position: fixed; z-index: 100; top: 0; }
    /* 导航中间部分 */
    .header .c { float: none; overflow: hidden; display: block; padding: 0 44px; line-height: 44px; text-align: center; font-size: 16px; color: #fff; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
    /* 导航左右部分 */
    .header .l, .header .r { overflow: hidden; position: absolute; top: 50%; right: 10px; height: 25px; text-indent: 25px; line-height: 23px; color: #fff; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
        .header .l { right: auto; left: 10px; background: url("http://pic.celong.cn/uploads/ueditor/2018-05-03/15253113867.png") no-repeat 0 0; background-size: auto 100%; }
            /* 导航图标或者带文本图标 */
            .header .icon, .header .txt { float: left; overflow: hidden; text-indent: 0; margin-left: 10px; height: 25px; line-height: 23px; color: #fff; }
            .header .icon { text-indent: 25px; width: 25px; background: url("http://pic.celong.cn/uploads/ueditor/2018-05-03/15253148014.png") no-repeat 0 0; background-size: auto 100%; }
            .header .icon.txt { width: auto; text-indent: 28px; }
    /* 搜索 */
    .header .so { margin: 10px auto; text-align: center; }
        .header .so .inp, .header .so .btn { vertical-align: middle; border: none; -moz-border-radius: 0; -ms-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
        .header .so .inp { padding: 2px; width: 100px; height: 24px; line-height: 24px; font-size: 14px; }
        .header .so .btn { padding: 0 10px; height: 24px; line-height: 24px; background: #ddd; }
    /* 导航 logo */
    .header .logo { text-indent: 0; width: auto; background: none; }
        .header .logo img { max-height: 100%; max-width: 100%; }

/* 导航下拉菜单按钮 */
.menuBtn { display: block; position: fixed; right: 0; }
    .menuBtn span, .menuBtn span:after, .menuBtn span:before { background: #fff; }
/* 导航下拉菜单 */
.header .nav { background: rgba(0, 0, 0, .3); }
    .header .nav li { float: none; line-height: 40px; text-align: center; }
    .header .nav a { display: block; font-size: 14px; color: #fff; border-bottom: 1px solid rgba(0, 0, 0, .3); }
        .header .nav .sub { background: rgba(0, 0, 0, .2); }
/* 折叠起来的导航区域，包含搜索框、下拉菜单 */
.js-nav { overflow: scroll; position: fixed; top: 45px; width: 100%; max-height: 100%; background-color: rgba(0, 0, 0, .85); -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; }
    /* 导航下拉出来 */
    .js-nav.down { bottom: 100%; visibility: hidden; opacity: 0; }
    .js-nav.down.open { bottom: 0; visibility: visible; opacity: 1; }
    /* 导航左侧出来 */
    .js-nav.left { bottom: 0; left: -75%; width: 75%; max-width: 375px; }
    .js-nav.left.open { left: 0; }
    /* 导航右侧出来 */
    .js-nav.right { bottom: 0; right: -75%; width: 75%; max-width: 375px; }
    .js-nav.right.open { right: 0; }