目についたおかしな部分を指摘すると、
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});
動作確認用サンプル
上記で指摘した以外でもちょこちょこと修正してますので、もとのコードと見比べて違いを確認してみてください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/13 13:34