Question

我试图点击汉堡包菜单时出现侧边栏菜单，当我点击关闭按钮时消失。问题是，当我点击关闭按钮时，汉堡包按钮完全出现在侧边栏菜单滑出之前，并且叠加淡出的不透明度太快，我已经改变了叠加层的过渡时间，但它没有改变任何东西 demo

<!doctype html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
    </head>
    <body>
        <header class="site-header" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
            <div class="wrap">
                <nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation">
                    <ul class="menu">
                        <li class="menu-item">
                            <a href="#">Home</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">About</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">Blog</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">Login</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>

        <main class="content" itemprop="mainContentOfPage" role="main">
          <main class="content" itemprop="mainContentOfPage" role="main">
                    <section class="row one white">
                        <div class="wrap">
                            <div class="advertisement">

                            </div>
                            <div class="three-fifths first">


                            </div>
                        </div>
                    </section>

                    <section class="row two white">
                        <div class="wrap">
                            <div class="advertisement">

                            </div>
                            <div class="three-fifths first">

                            </div>
                        </div>
                    </section>
                </main>
        </main>

        <footer class="site-footer" itemtype="http://schema.org/WPFooter" itemscope="itemscope" role="contentinfo">
            ...
        </footer>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

的script.js

$(function() {
    // Insert Responsive Navigation Icon, Close Icon, and Overlay
    // If you have access to your HTML, you should put this directly into your markup.
    $('<div class="responsive-nav-icon" />').appendTo('.row.one');
    $('<div class="responsive-nav-close" />').appendTo('nav');
    $('<div id="overlay" />').insertAfter('footer');

    // Navigation Slide In
    $('.responsive-nav-icon').click(function() {
        $('nav').addClass('slide-in');
        $('html').css("overflow", "hidden");
        $('#overlay').show();
        return false;
    });

    // Navigation Slide Out
    $('#overlay, .responsive-nav-close').click(function() {
        $('nav').removeClass('slide-in');
        $('html').css("overflow", "auto");
        $('#overlay').hide();
        return false;
    });
});

的style.css

.responsive-nav-icon::before,
.responsive-nav-close::before {
    color: #93a748;
    content: "\f0c9";
    font-family: FontAwesome;
    font-size: 22px;
    position: relative;
}

.responsive-nav-close::before {
    color: #93a748;
    content: "\f00d";
    font-size: 18px;
}

.responsive-nav-icon {
    background: #fff;
    line-height: normal;
    padding: 5px 8px 4px;
    top: 5%; left: 5%;
}

.responsive-nav-icon:hover,
.responsive-nav-close:hover {
    opacity: .7;
}

.responsive-nav-close {
    top: 10px; right: 10px;
}

.responsive-nav-icon,
.responsive-nav-close {
    cursor: pointer;
    display: none;
}

#overlay {
    background: 0 0 rgba(0, 0, 0, 0.8);
    display: none;
    height: 100%;
    position: fixed;
    top: 0; left: 0;
    -moz-transition: all 1s linear 0s;
        -webkit-transition: all 1s linear 0s;
        -ms-transition: all 1s linear 0s;
        transition: all 1s linear 0s;
    width: 100%;
    z-index: 90;
}

@media only screen and (max-width: 960px) {
    .responsive-nav-icon,
    .responsive-nav-close {
        display: block;
        position: absolute;
        z-index: 1;
    }

    nav {
      background: #fff none repeat scroll 0 0;
        height: 100%;
        padding: 20px;
        position: fixed;
        top: 0; left: -400px;
        -moz-transition: all 1s linear 0s;
        -webkit-transition: all 1s linear 0s;
        -ms-transition: all 1s linear 0s;
        transition: all 1s linear 0s;
        width: 0;
    }

    nav.slide-in {
        left: 0;
        overflow-y: scroll;
        width: 280px;
        z-index: 100;
    }

    nav .menu-item {
        display: block;
    }
}

Answer 1

它可能看起来像黑客，但我在你的jQuery代码中添加了setTimeout。

// Navigation Slide In
$('.responsive-nav-icon').click(function() {
    $('nav').addClass('slide-in');
    $('html').css("overflow", "hidden");
    $('#overlay').show();
    $('.responsive-nav-icon').hide();
    return false;
});

// Navigation Slide Out
$('#overlay, .responsive-nav-close').click(function() {
    $('nav').removeClass('slide-in');
    $('html').css("overflow", "auto");
    $('#overlay').hide();
    setTimeout(function() { $('.responsive-nav-icon').show() }, 600);
    return false;
});

}）;

我使用1000ms进行了测试，但汉堡菜单显示得太晚了，500ms是妥协。你可以玩它。

另外，当您点击汉堡菜单时，我添加了$('.responsive-nav-icon').hide();。

导航图标显示太快

1 个答案: