漢堡包關閉後在較大的設備上顯示菜單

我是初學者，需要一些建議。我試圖建立漢堡菜單和我的菜單，通過關閉按鈕關閉後，當我將屏幕調整爲更大的分辨率時，不會顯示。有人可以幫助我嗎？下面是代碼：漢堡包關閉後在較大的設備上顯示菜單

<header class="page-header"> 
    <div class="logo-wrapper"> 
    <i class="fa fa-superpowers" aria-hidden="true"></i> 
    </div> 
    <button class="menu-open">O</button> 
    <button class="menu-close">X</button> 
    <nav class="nav-bar"> 
    <ul class="nav-list"> 
     <li class="nav-item">Home</li> 
     <li class="nav-item">About</li> 
     <li class="nav-item">Projects</li> 
     <li class="nav-item">Contact</li> 
     <li class="nav-item">Sign up</li> 
    </ul> 
    </nav> 
</header>

CSS：

.page-header { 
    position: relative; 
    background-color: #FFFFFF; 
} 

.logo-wrapper { 
    padding: 20px; 
} 

.menu-open { 
    position: absolute; 
    top: 0; 
    right: 15px; 
} 

.menu-close { 
    position: absolute; 
    top: 0; 
    right: 15px; 
} 

.nav-bar { 
    text-align: center; 
    display: none; 
} 

.nav-list { 
    list-style: none; 
    padding: 0; 
} 

.nav-item { 
    padding: 12px 0; 
    border-bottom: 1px solid #FAFAFA; 
} 

/*---MEDIA QUERIES---*/ 

    @media screen and (min-width: 768px) { 
    button { 
    display: none; 
    } 

    .page-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    } 

    .nav-bar { 
    display: block; 
    } 

    .nav-item { 
    display: inline-block; 
    padding: 10px 15px; 
    } 
}

的Jquery：

$(document).ready(function(){ 

     $(".menu-close").hide(); 

     $(".menu-open").click(function() { 
    $(".nav-bar").slideToggle("slow", function() { 
     $(".menu-open").hide(); 
     $(".menu-close").show(); 
    }); 
    }); 

     $(".menu-close").click(function() { 
    $(".nav-bar").slideToggle("slow", function() { 
     $(".menu-close").hide(); 
     $(".menu-open").show(); 
    }); 
    }); 
});

來源

2017-05-07 doknow

$(window).on("resize", function(event){ 
if($(this).width() > 767){ 
$('.nav-bar').show(); 
});

一旦閉合，顯示：沒有將應用到它，這就是爲什麼它不出現。另一個選擇是添加顯示：塊！重要;在媒體查詢屏幕最小寬度767px

來源

2017-05-07 10:51:29 RemyaJ

漢堡包關閉後在較大的設備上顯示菜單

回答

相關問題