jqueryでtoggleが上手く実装できません。

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="practice9.css"> <script src="https://tsukigime-rider.com/js/jquery-3.1.1.min.js"></script> <script src="https://tsukigime-rider.com/js/jquery-ui.js"></script> <script src="https://tsukigime-rider.com/js/public/plugin/jquery.ui.touch-punch.min.js"></script> <script src="https://tsukigime-rider.com/js/plugins/aos/aos.min.js"></script> <script src="https://tsukigime-rider.com/js/plugins/magnific-popup/jquery.magnific-popup.min.js"></script> <script src="https://tsukigime-rider.com/js/plugins/slick/slick.min.js"></script> <title>practice8</title> </head> <body> <header> <div class="inner"> <div class="menu-btn"><img src="http://bunkai-san.jp/wp-content/themes/bunkaisan/img/sp-menu.png" alt=""></div> <div class="menu-btn-close"><img src="http://bunkai-san.jp/wp-content/themes/bunkaisan/images/toggle-off.png" alt=""></div> <ul class="header-menu"> <li class="menu-btn01">CONCEPT</li> <li class="menu-btn02">FLOOR GUIDE</li> <li class="menu-btn03">NEWS</li> <li class="menu-btn04">ACCESS INFO</li> <li class="menu-btn05">CONTACT</li> </ul> <div class="header-logo"><a href="http://bunkai-san.jp/"><img src="http://bunkai-san.jp/wp-content/themes/bunkaisan/img/logo.png" alt=""></a></div> </div> </header>

css
.inner {
width: 100%;
overflow: hidden;
}
.inner ul {
list-style: none;
}
.header-menu {
display: flex;
justify-content: center;
position: relative;
top: -50px;
}
.header-menu li {
font-family: 'Abel', sans-serif;
margin: 20px;

}
.menu-btn img {
position: relative;
left: 1340px;
top: 20px;
}
.menu-btn-close img {
position: relative;
left: 1340px;
top: -40px;
width: 50px;
height: 50px;
display: none;
}

jQuery

前提・実現したいこと

jQueryのtoggleを使って表示非表示をしたいのです。
そして、menuでよく使われる３本線の入ったマークとばつ印（両方実装済み）の切り替えも教えていただきたいです。
ここに質問の内容を詳しく書いてください。
toggleを実装してクリックすると表示はされるのですが、非表示にできないです。

補足情報（FW/ツールのバージョンなど）

元のサイトのurlはhttp://bunkai-san.jp/です。
よろしくお願いします。
ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

ベストアンサー

目についたおかしな部分を指摘すると、

CSSのimgのleft: 1340px;
画面が狭いと画面からはみ出します。
right: で画面の右端を基準に位置決めするようにしましょう。

HTMLで三本線と×のボタン画像が別々のブロックになってますが、同じ位置でクリックで切り替えるので、同じブロックにいれましょう。
また、このブロックでボタンの位置決めをするといいでしょう。
さらに、このブロックのz-indexを大きくしてメニューブロックの上に来るようにします。そうしないとメニューが表示された時クリックできない。

jQuery ではこのブロックのクリック時で、メニューの表示切替、ボタン画像の切り替えをするようにします。

上記の点を考慮して、修正すると下記のようになります。

html
1<header>  
2  <div class="inner">  
3    <div class="menu-btn">
4      <img class="open" src="http://bunkai-san.jp/wp-content/themes/bunkaisan/img/sp-menu.png" alt="">
5      <img class="close" src="http://bunkai-san.jp/wp-content/themes/bunkaisan/images/toggle-off.png" alt="">
6    </div>  
7    <ul class="header-menu">  
8      <li class="menu-btn01">CONCEPT</li>  
9      <li class="menu-btn02">FLOOR GUIDE</li>  
10      <li class="menu-btn03">NEWS</li>  
11      <li class="menu-btn04">ACCESS INFO</li>  
12      <li class="menu-btn05">CONTACT</li>  
13    </ul>  
14    <div class="header-logo"><a href="http://bunkai-san.jp/"><img src="http://bunkai-san.jp/wp-content/themes/bunkaisan/img/logo.png" alt=""></a></div>  
15  </div>  
16</header>

css
1.inner {
2  width: 100%;
3  overflow: hidden;
4}
5.inner ul {
6  list-style: none;
7  margin: 0;
8  padding: 0;
9}
10.header-menu {
11  display: flex;
12  justify-content: center;
13}
14
15.header-menu li {
16  font-family: 'Abel', sans-serif;
17  margin: 20px;
18}
19.menu-btn {
20  position: absolute;
21  top: 20px;
22  right: 50px;
23  width: 50px;
24  height: 50px;
25  z-index: 99;
26}
27.menu-btn img {
28  position: absolute;
29  width: 50px;
30  height: 50px;
31}
32
33main {
34  height: 800px;
35}

js
1$(function() {
2  $(".header-menu, .close").hide();
3  $(".menu-btn").click(function() {
4    $(".header-menu").slideToggle(200);
5    $(".open, .close").fadeToggle(200);
6  });
7});