Question

我正在尝试使用jQuery创建一个响应式导航栏，而我尝试的任何东西都没有修复它。

的jQuery

$(function() {
    var pull = $('#pull');
    menu = $('nav ul');
    menuHeight = menu.height();

    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
};

HTML

<div id="wrapper clearfix">
    <header class="english">
        <div id="top-header">
            <a href="../index.html"><h1></h1></a>
            <h2></h2>
            <h2></h2>
        </div>

        <nav class="clearfix">
            <ul class="clearfix">
                <li class="menu-active"><a href="english.html">Home</a></li>
                <li><a href="story.html">Our Story</a></li>
                <li><a href="ceremony-reception.html">Ceremony & Reception</a></li>
                <li><a href="accommodation.html">Accommodation</a></li>
                <li><a href="album.html">Photos</a></li>
                <li><a href="registry.html">Registry</a></li>
                <li><a href="guest-book.html">Guest Book</a></li>
                <li><a class="bsb" href="information.html">Information for Americans</a></li>
            </ul>
            <a href="#" id="pull">Menu</a>
        </nav>
    </header>
</div>

CSS

nav {height: 40px; width: 100%; background: #B9DACC; background-repeat: no-repeat; position: relative;}
nav ul {padding: 0; margin: 0 auto; width: 960px; background: #B9DACC;}
nav li {display: inline; float: left;}
nav a {font-family: "coolvetica_rgregular",Arial,sans-serif; color: #fff; display: inline-block; padding: 0 12px; text-align: center;text-decoration: none; line-height: 40px;font-size: 16px;}
nav li:last-child a {border: none;}
nav a:hover, nav a:active {background-color: #F4C3AB;}
nav a#pull {display: none;}

我一直在尝试为WRD添加最重要的，@media queries的样式，但由于缩进，它不会让我失望。有没有办法可以发送它？

Answer 1

在Jquery中执行调整大小操作，而不是在媒体查询的帮助下尝试使用CSS重新调整大小。以下是它的样本。试一试。

@media screen and (max-width: 500px) {
aside{
display:none;
}

#wrapper{
width:100%;
}

// Specify here the operation to perform when condition in met.
}

使用JavaScript的响应式导航栏不会调整大小

1 个答案: