jQueryバーガーメニューの問題

Question

jQueryを使用してバーガーメニューを作成しましたが、最後のカップルビットを把握するために助けが必要です。まず、動作していないnav内​​の開いているメニューリンクに遷移効果を追加しました。第2に、ハンバーガーが閉じられたら#menu_listを閉じる必要があります。現時点ではまだ開いています。

<div id="mobile_navBar"> 

    <div id="burger_icon"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    </div> 
</div> 

<nav> 

    <ul> 
    <img class="nav_decoration" src="images/top%20frame.png" alt=""> 
    <li id="open_menu"><a href="#">open menu</a></li> 
    <ul id="menu_list"> 
     <li class="auto_close"><a href="#welcomeAnchor">Welcome</a></li> 
     <li class="auto_close"><a href="#menuAnchor">Menu</a></li> 
     <li class="auto_close"><a href="#timesAnchor">Opening Times</a></li> 
    </ul> 
    <img class="nav_decoration" src="images/Base%20Frame.png" alt=""> 
    </ul> 
</nav> 

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 

CSS：

#mobile_navBar{ 
    display: block !important; 
    background-color: #111; 
    position: relative; 
    height: 4em; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 1000; 
} 

#burger_icon{ 
    display: block; 
    float: right; 
    position: relative; 
    height: 32px; 
    width: 40px; 
    cursor: pointer; 
    margin-top: 1em; 
    margin-right: 0.5em; 
} 

#burger_icon span{ 
    position: absolute; 
    display: block; 
    width: 40px; 
    height: 5px; 
    background-color: #fff; 
    border-radius: 5px; 
    transition: all 0.25s; 
    -webkit-transition: all 0.25s; 
    -moz-transition: all 0.25s; 
    -ms-transition: all 0.25s; 
    -o-transition: all 0.25s; 
} 

#burger_icon span:nth-child(1){ 
    top: 0; 
} 

#burger_icon span:nth-child(2), #burger_icon span:nth-child(3){ 
    top: 13px; 
} 

#burger_icon span:nth-child(4){ 
    bottom: 0px; 
} 

#burger_icon.open span:nth-child(1){ 
    opacity: 0; 
} 

#burger_icon.open span:nth-child(2){ 
    transform: rotate(45deg); 
} 

#burger_icon.open span:nth-child(3){ 
    transform: rotate(-45deg); 
} 

#burger_icon.open span:nth-child(4){ 
    opacity: 0; 
} 

nav{ 
    margin-top: 4em; 
    position: fixed; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 0; 
    transition: height 1s; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.9); 
    text-align: center; 
} 

nav ul{ 
    width: 100%; 
    padding-top: 2em; 
    padding-bottom: 80px; 
    overflow: scroll; 
} 

nav ul li{ 
    display: block; 
    box-sizing: border-box; 
    padding: 2em 0; 
    margin: 0 auto; 
} 

nav ul li a{ 
    font-size: 2em; 
    color: white; 
} 

#menu_list{ 
    display: none; 
    height: 0; 
    transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
} 

#menu_list.show{ 
    display: block; 
    padding: 0; 
    height: auto; 
} 

#open_menu.hide{ 
    display: none; 
} 

#menu-list:nth-child(1){ 
    border-bottom: dotted 1px #fff; 
    width: 55%; 
} 

#menu-list:nth-child(2){ 
    border-bottom: dotted 1px #fff; 
    width: 55%; 
} 

nav.show{ 
    height: 100%; 
    display: block; 
    overflow: scroll; 
} 

.nav_decoration{ 
    display: block; 
    width: 90%; 
    margin: 0 auto; 
} 

#contact_title{ 
    display: block; 
    font-size: 2em; 
    padding-top: 1em; 
    padding-bottom: 0.5em; 
    font-weight: bold; 
} 

#contact_title span{ 
    border-bottom: dotted 1px #fff; 
} 

.mob_contact{ 
    font-size: 1.25em; 
    padding: 0.25em 0; 
    display: block; 
} 

#mob_num{ 
    font-size: 2.5em; 
} 

#mob_icons{ 
    display: block; 
    font-size: 1em; 
    padding: 0 !important; 
} 

のjQuery：

$(document).ready(function() { 
    $("#burger_icon, .auto_close").click(function() { 

    $("body").toggleClass("no_scroll"); 
    $("nav").toggleClass("show"); 
    $("#burger_icon").toggleClass("open"); 

    $("#open_menu").click(function() { 
     $("#menu_list").toggleClass("show"); 
     $("#open_menu").toggleClass("hide"); 
    }); 
    }); 
}); 

ここでデモがhttps://jsfiddle.net/Lsxht5bs/

Answer 1

だ$("#burger_icon, .auto_close")のクリックイベント内のコードの下に追加します。

$("#menu_list").removeClass("show");

$("#open_menu").removeClass("hide");

これは内部のメニューをリセットします。あなたのフィドルでトランジションが正常に動作しています。

は

Answer 2

Here is the updated demo with your desired functionality with your updated code  

$(document).ready(function() { 
 
    $("#burger_icon, .auto_close").click(function() { 
 

 
    $("body").toggleClass("no_scroll"); 
 
    $("nav").toggleClass("show"); 
 
    $("#burger_icon").toggleClass("open"); 
 

 
    $("#open_menu").click(function() { 
 
     $("#menu_list").toggleClass("show"); 
 
     $("#open_menu").toggleClass("hide"); 
 
    }); 
 
    
 
     if($('#menu_list').hasClass('show')) { 
 
     $('#menu_list').removeClass('show'); 
 
     $("#open_menu").removeClass("hide"); 
 
     } 
 
    }); 
 
});

#mobile_navBar{ 
 
    display: block !important; 
 
    background-color: #111; 
 
    position: relative; 
 
    height: 4em; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1000; 
 
} 
 

 
#burger_icon{ 
 
    display: block; 
 
    float: right; 
 
    position: relative; 
 
    height: 32px; 
 
    width: 40px; 
 
    cursor: pointer; 
 
    margin-top: 1em; 
 
    margin-right: 0.5em; 
 
} 
 

 
#burger_icon span{ 
 
    position: absolute; 
 
    display: block; 
 
    width: 40px; 
 
    height: 5px; 
 
    background-color: #fff; 
 
    border-radius: 5px; 
 
    transition: all 0.25s; 
 
    -webkit-transition: all 0.25s; 
 
    -moz-transition: all 0.25s; 
 
    -ms-transition: all 0.25s; 
 
    -o-transition: all 0.25s; 
 
} 
 

 
#burger_icon span:nth-child(1){ 
 
    top: 0; 
 
} 
 

 
#burger_icon span:nth-child(2), #burger_icon span:nth-child(3){ 
 
    top: 13px; 
 
} 
 

 
#burger_icon span:nth-child(4){ 
 
    bottom: 0px; 
 
} 
 

 
#burger_icon.open span:nth-child(1){ 
 
    opacity: 0; 
 
} 
 

 
#burger_icon.open span:nth-child(2){ 
 
    transform: rotate(45deg); 
 
} 
 

 
#burger_icon.open span:nth-child(3){ 
 
    transform: rotate(-45deg); 
 
} 
 

 
#burger_icon.open span:nth-child(4){ 
 
    opacity: 0; 
 
} 
 

 
nav{ 
 
    margin-top: 4em; 
 
    position: fixed; 
 
    overflow: hidden; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 0; 
 
    transition: height 1s; 
 
    background: rgb(0, 0, 0); 
 
    background: rgba(0, 0, 0, 0.9); 
 
    text-align: center; 
 
} 
 

 
nav ul{ 
 
    width: 100%; 
 
    padding-top: 2em; 
 
    padding-bottom: 80px; 
 
    overflow: scroll; 
 
} 
 

 
nav ul li{ 
 
    display: block; 
 
    box-sizing: border-box; 
 
    padding: 2em 0; 
 
    margin: 0 auto; 
 
} 
 

 
nav ul li a{ 
 
    font-size: 2em; 
 
    color: white; 
 
} 
 

 
#menu_list{ 
 
    display: none; 
 
    height: 0; 
 
    transition: all 1s ease; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
} 
 

 
#menu_list.show{ 
 
    display: block; 
 
    padding: 0; 
 
    height: auto; 
 
} 
 

 
#open_menu.hide{ 
 
    display: none; 
 
} 
 

 
#menu-list:nth-child(1){ 
 
    border-bottom: dotted 1px #fff; 
 
    width: 55%; 
 
} 
 

 
#menu-list:nth-child(2){ 
 
    border-bottom: dotted 1px #fff; 
 
    width: 55%; 
 
} 
 

 
nav.show{ 
 
    height: 100%; 
 
    display: block; 
 
    overflow: scroll; 
 
} 
 

 
.nav_decoration{ 
 
    display: block; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 

 
#contact_title{ 
 
    display: block; 
 
    font-size: 2em; 
 
    padding-top: 1em; 
 
    padding-bottom: 0.5em; 
 
    font-weight: bold; 
 
} 
 

 
#contact_title span{ 
 
    border-bottom: dotted 1px #fff; 
 
} 
 

 
.mob_contact{ 
 
    font-size: 1.25em; 
 
    padding: 0.25em 0; 
 
    display: block; 
 
} 
 

 
#mob_num{ 
 
    font-size: 2.5em; 
 
} 
 

 
#mob_icons{ 
 
    display: block; 
 
    font-size: 1em; 
 
    padding: 0 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mobile_navBar"> 
 

 
    <div id="burger_icon"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    </div> 
 
</div> 
 

 
<nav> 
 

 
    <ul> 
 
    <img class="nav_decoration" src="images/top%20frame.png" alt=""> 
 
    <li id="open_menu"><a href="#">open menu</a></li> 
 
    <ul id="menu_list"> 
 
     <li class="auto_close"><a href="#welcomeAnchor">Welcome</a></li> 
 
     <li class="auto_close"><a href="#menuAnchor">Menu</a></li> 
 
     <li class="auto_close"><a href="#timesAnchor">Opening Times</a></li> 
 
    </ul> 
 
    <img class="nav_decoration" src="images/Base%20Frame.png" alt=""> 
 
    </ul> 
 
</nav> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>