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.menuLi.off('mouseenter mouseleave');
            this.menu.find('.sub').stop(true, true).slideUp(0);
            if ($(window).innerWidth() < width) {
                this.menuLi.off('mouseenter mouseleave');
                this.menuLink.on('click', function() {
                    if ($(this).siblings('.sub').length) {
                        $(this).siblings('.sub').stop(true, true).slideToggle('fast').parent().siblings().find('.sub').stop(true, true).slideUp('fast');
                        return false;
                    }
                })
            } else {
                this.menuBtn.removeClass('open');
                this.nav.removeClass('open');
                this.menuLi.on('mouseenter', function() {
                    if ($(this).find('.sub').length) {
                        $(this).find('.sub').stop(true, true).slideDown('fast');
                    }
                });
                this.menuLi.on('mouseleave', function() {
                    $(this).find('.sub').stop(true, true).slideUp('fast');
                });
            }
        }
    };

    nav.init();
    var resizeTimer = null;
    $(window).on('resize', function () {
        if (resizeTimer) {
            clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(function(){
            nav.resize(959);
        }, 100);
    });

})

<div class="header">
    <div class="menuBtn"><span></span></div>
    <div class="hdr down js-nav">
        <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="logo">
        <img src="http://5811.com.cn/images/logo.png" alt="" />
    </a>
</div>

<div class="main" style="height: 500px;">
    我是导航下面的内容，仅供演示，使用时不必复制。<br />
    根据导航后面跟的 class 名字不同，将下面的 .main 改为对应的 class 名，以避免被 fixed 导航遮挡。<br />
    .header + .main { margin-top: 45px; }
</div>

/* 导航 */
.header { position: relative; padding: 0 150px 0 210px; height: 45px; background: #03a9f4; }
    /* 导航 logo */
    .header .logo { position: absolute; z-index: 101; top: 50%; left: 10px; width: 190px; height: 24px; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
        .header .logo img { max-height: 100%; max-width: 100%; }
    /* 搜索 */
    .header .so { position: absolute; right: 10px; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
        .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; }
    /* 导航下拉菜单 */
    .header .nav {}
        .header .nav li { position: relative; float: left; }
            .header .nav a { display: block; line-height: 45px; font-size: 18px; color: #fff; padding: 0 15px; }
                .header .nav a:hover { background: #00a0e0; }
            /* 二级菜单 */
            .header .nav .sub { display: none; position: absolute; white-space: nowrap; min-width: 100%; background: #03a9f4; }
                .header .nav .sub a:hover { background: #00a0e0; }

@media only screen and (max-width: 959px) {
    /* 吸顶导航 */
    .header, .header::before { content: ''; position: fixed; z-index: 100; top: 0; padding: 0; width: 100%; height: 45px; background: #03a9f4; }
    /* 紧跟着导航的元素 */
    .header + .main { margin-top: 45px; }
    /* 导航下拉菜单按钮 */
    .menuBtn { display: block; position: fixed; z-index: 101; right: 0; }
        .menuBtn span, .menuBtn span:after, .menuBtn span:before { background: #fff; }
    /* 搜索 */
    .header .so { position: static; margin: 15px auto; text-align: center; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
    /* 导航下拉菜单 */
    .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, .1); }
        .header .nav .sub { position: static; background: rgba(0, 0, 0, .15); }
            .header .nav a:hover, .header .nav .sub a:hover { background: rgba(0, 0, 0, .1); }
    /* 折叠起来的导航区域，包含搜索框、下拉菜单 */
    .hdr { overflow: scroll; position: fixed; z-index: 99; top: 45px; width: 100%; max-height: 100%; background-color: rgba(0, 0, 0, .6); -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; }
        /* 导航下拉出来 */
        .hdr.down { bottom: 100%; visibility: hidden; opacity: 0; }
        .hdr.down.open { bottom: 0; visibility: visible; opacity: 1; }
        /* 导航左侧出来 */
        .hdr.left { bottom: 0; left: -75%; width: 75%; max-width: 375px; }
        .hdr.left.open { left: 0; }
        /* 导航右侧出来 */
        .hdr.right { bottom: 0; right: -75%; width: 75%; max-width: 375px; }
        .hdr.right.open { right: 0; }
}