0
現在、ハンバーグメニューを含む1ページのウェブサイトを設定しています。 メニューは、そのページ上の特定のタグにリンクされたリスト要素で構成されています。メニュー項目をクリックした後のハンバーガーアニメーションの復帰
私には1つの問題しかありません。それはハンバーグアイコンのアニメーション（クリックしてクロスクリックになります）を元の状態に戻すことです。
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open').show();
});
$('#overlay li').on('click', function(){
$('#overlay').hide();
$('#toggle').removeClass("active");
});@import url('https://fonts.googleapis.com/css?family=Varela+Round');
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #1abc9c;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #1abc9c;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.container a:hover:after, .container a:focus:after, .container a:active:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
font-family: 'Varela Round', serif;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #fd7014;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
.overlay {
position: fixed;
background: #1a1a1a;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-family: 'Varela Round', sans-serif;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: ;
height: 25%;
height: calc(100%/4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: ;
position: relative;
color: #fd7014;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}<div id="toggle" class="button_container">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div id="overlay" class="overlay">
<nav class="overlay-menu">
<ul>
<li class="overlay-li"><a href="#">portfolio</a></li>
<li><a href="#">services</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</div>この問題を解決する方法をどこ誰もが知っています：ここで
コードですか？
このコードは動作しているようです - 閉じるときにメニューが元の状態に戻ります - この[demo]（https://codepen.io/dankreiger5/pen/WEPJpa）を確認してください –
デモをありがとうあなたの答え。メニュー項目をクリックすると、元の状態に戻っていることがわかります。しかし、問題は、ハンバーガーのアイコンが元の状態（クロスアイコンはそのまま）に戻らないため、クロスバーをタップしてハンバーガーアイコンをタップして再度メニューを開く必要があることです。 – ZnortDesigns
私は今問題を見る - それは正しい答えを持っている@lamankushのように見えます。 –