使用 JavaScript 的响应式导航栏未调整大小答案

【问题标题】：Responsive navigation bar using JavaScript is not resizing使用 JavaScript 的响应式导航栏未调整大小
【发布时间】：2017-02-23 04:34:58
【问题描述】：

我正在尝试使用 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 的样式，但由于缩进，它没有让我这样做。有什么方法可以发吗？

【问题讨论】：

哪个部分不工作？
你能不能上JSFIDDLE。请问？
@YeshanSachithaKPerera - 请不要建议人们添加指向外部网站的链接。他们应该发布在问题中重现问题所需的所有代码。

标签： jquery html css responsive-design nav

【解决方案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.
}

【讨论】：