下拉漢堡包響應式

Question

我用著名的漢堡包圖標創建了一個下拉菜單。 當頁面加載時和/或在向下滾動頁面之前，它會完美下降，但是如果我向下滾動然后向上滾動，當我單擊圖標時，它將導航列表減半，不再顯示它的內容在滾動之前做了。 我不確定為什么要這么做。

這是腳本：

<script>
 $(document).ready(function (){
  $('.nav-btn').on("click", function() {
    $('#main-nav').slideToggle("slow");
     $(window).resize(function() {
        if($(window).width() > 600) {
            $("#main-nav").removeAttr("style");
            }
        });
    });
    });
</script>

這是HTML（在標題內）：

<span class="nav-btn"></span>
    <nav id="main-nav">
        <ul>
            <li><a href="#home" class="scroll">HOME</a></li>
            <li><a href="#about" class="scroll">ABOUT</a></li>
            <li><a href="#portfolio" class="scroll">PORTFOLIO</a></li>
            <li><a href="#contact" class="scroll">CONTACT</a> </li>
        </ul>
    </nav>  

這是CSS：

#main-nav {
    text-align: center;
    display: none;
    background-color: #F1F1F1;
}

#main-nav li {
    display: block;
    border-bottom: 5px #565656 solid;
    padding: 5px 0 5px 0;
}

#main-nav li:last-child {
    border-bottom: none;
}

#main-nav ul li {
    font-size: 1em;
    font-family: 'montserratregular';
    text-align: left;
}

.nav-btn {
    display: block;
    background-color: #F1F1F1;
    color: #333;
    font-size: 40px;
    text-align: left;
    cursor: pointer;
}

.nav-btn:before {
    content: url("hamburger.png");
    padding-left: 15px;
}

Answer 1

您有一個在#headwrapper div上應用130px高度的JavaScript。

<div id="headwrapper" class="" style="height: 130px;">

當我把菜單上的130px刪除時，菜單將正常運行。 它似乎是在滾動添加它，所以當我滾動回到頂部時，javascript再次啟用了它。 嘗試將其更改為height: auto或者將其設置為height: auto; max-height: 1000px;而不是設置固定的高度height: auto; max-height: 1000px; height: auto; max-height: 1000px; 或類似的東西。 這應該解決您遇到的問題。

編輯*：而不是像您一樣更改內聯的高度，我建議放置一個max-height: 75px; 在您的.small並增加一個height: auto; max-height: 1000px; height: auto; max-height: 1000px; 在#headwrapper 。 如果將它與css-transition一起使用，則應具有與現在相同的效果。