質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

931閲覧

ハンバーガーメニューを閉じる×印を作りたい(CSSのみで)

shuto0901

総合スコア16

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/03/10 06:27

編集2020/03/10 12:10

前提・実現したいこと

ハンバーガーメニューを閉じる×印をCSSのみで作りたい。

発生している問題・エラーメッセージ

ハンバーガーメニューの閉じる×印の作り方がわからない。

該当のソースコード

HTML

1<div id="nav-drawer"> 2 <input id="nav-input" type="checkbox" class="nav-unshown"> 3 <label id="nav-open" for="nav-input"><span></span></label> 4 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 5 <div id="nav-content"> 6 <ul> 7 <li>Skill</li> 8 <li>About</li> 9 <li>Contact</li> 10 </ul> 11 </div> 12 </div>

CSS

1#nav-drawer{ 2 position: relative; 3 padding-right: 35px; 4 padding-top: 20px; 5} 6 7.nav-unshown { 8 display: none; 9} 10 11#nav-open { 12 display: inline-block; 13 width: 30px; 14 height: 22px; 15 vertical-align: middle; 16} 17 18#nav-open span, #nav-open span:before,#nav-open span:after { 19 position: absolute; 20 height: 3px; 21 width: 20px; 22 border-radius: 3px; 23 background: #5F2201; 24 display: block; 25 content: ''; 26 cursor: pointer; 27} 28 29#nav-open span:before { 30 bottom: -8px; 31} 32 33#nav-open span:after { 34 bottom: -16px; 35} 36 37#nav-close { 38 display: none; 39 position: fixed; 40 z-index: 99; 41 top: 0; 42 left: 0; 43 width: 100%; 44 height: 100%; 45 background: black; 46 opacity: 0; 47 transition: .3s ease-in-out; 48} 49 50#nav-content { 51 overflow: auto; 52 position: fixed; 53 top: 0; 54 left: 0; 55 z-index: 9999; 56 width: 90%; 57 max-width: 375px; 58 text-align: center; 59 height: 100%; 60 background: #ffffff; 61 transition: .3s ease-in-out; 62 -webkit-transform: translateX(-105%); 63 transform: translateX(-105%); 64} 65 66#nav-content ul { 67 padding-inline-start: 0; 68} 69 70#nav-content li { 71 list-style: none; 72 padding-top: 70px; 73 font-weight: bold; 74 color: #5F2201; 75} 76 77#nav-input:checked ~ #nav-close { 78 display: block; 79 opacity: .5; 80} 81 82#nav-input:checked ~ #nav-content { 83 -webkit-transform: translateX(0%); 84 transform: translateX(0%); 85 box-shadow: 6px 0 25px rgba(0, 0, 0, 15); 86} 87

試したこと

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

上記のコードはハンバーガーメニューを閉じる際、画面右端をクリックして閉じますが、
メニューを開いた際右上に×印が現れてクリックすると閉じるというのが理想です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/03/10 06:56

class="nav=unshown" htmlはこうなってますがcssは .nav-unshown となってます。 実際はどちらですか?それとも本当にこのままですか? あと、ネット上にこの手のものは転がってそうに思いますが、どれも参考になりませんでしたか?(調べたこと試したことがなにも書いてないので)
shuto0901

2020/03/10 12:05

htmlが間違えており正しくはclass="nav-unshown"でした。 申し訳ございません。 調べましたがCSSだけでハンバーガーメニューを実装するサイトは閉じる×印がないものばかりで参考になりませんでした。 三本線をタップした後、線の傾きを変えて×印を作るというのは調べてなんとなくわかりましたが、この既存のコードのどこをどう変更したらいいのか数時間調べ、考えてもわからなかったので質問させていただきました。
m.ts10806

2020/03/10 12:06

質問は編集できますので、適宜調整してください。 あと、念のため確認したサイトURLをいくつか代表的なもので結構ですのでご提示ください。
guest

回答3

0

ベストアンサー

作例

#nav-content直下の任意の場所に以下のhtmlタグを追加する

html

1<label for="nav-input" class="close"><span class="close-icon"></span></label>

CSS

1.close { 2 position: absolute; 3 top: 20px; 4 right: 20px; 5 width: 20px; 6 height: 20px; 7 transform: rotate(45deg); 8 cursor: pointer; 9} 10 11.close-icon::before { 12 content: ""; 13 display: block; 14 width: 16px; 15 height: 2px; 16 left: 0; 17 right: 0; 18 top: 0; 19 bottom: 0; 20 margin: auto; 21 background: #5f2201; 22 position: absolute; 23 24} 25 26.close-icon::after { 27 content: ""; 28 display: block; 29 height: 16px; 30 width: 2px; 31 left: 0; 32 right: 0; 33 top: 0; 34 bottom: 0; 35 margin: auto; background: #5f2201; 36 position: absolute; 37}

解説

まず、このCSSのみでつくるハンバーガーメニューの仕組みですが、チェックボックス(<input id="nav-input" type="checkbox" class="nav-unshown">)にチェックがついたらメニューを開く、ついていなかったらメニューを閉じる、ということを、cssの#nav-input:checked ~ #nav-contentあたりの指定でやっています。
なので、開いたり閉じたりしたかったらチェックボックスを操作すれば良いです。

チェックボックスの操作はチェックボックスそのものをクリックする以外に、labelタグを使えば別の場所からもできます。ハンバーガーメニューやメニュー外の黒い半透明のエリアがlabelタグで囲まれているのはそのためです。

それを応用して、開いたメニューの中にlabelタグをいれておけば、それが閉じるボタンになります。

×印の作り方についてはすでにご自身で調べられているようなので詳しく解説はしません。new1roさんの回答も参考にして下さい。

投稿2020/03/10 12:35

hwatarig

総合スコア461

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shuto0901

2020/03/10 14:35

ありがとうございます。 無事解決いたしました!! 何時間も考えて解決できなかったのでめちゃくちゃ嬉しいてす!
guest

0

::before, ::after 疑似要素と transform プロパティを用いることで、質問者さんの実現したいことが行えると思います (動作確認用リンク)。

HTML

1<div id="nav-drawer"> 2 <input id="nav-input" type="checkbox" class="nav-unshown"> 3 <label id="nav-open" for="nav-input"><span></span></label> 4 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 5 <div id="nav-content"> 6 <label class="nav-unshown" id="btn-nav-close" for="nav-input"></label> 7 <ul> 8 <li>Skill</li> 9 <li>About</li> 10 <li>Contact</li> 11 </ul> 12 </div> 13</div>

CSS

1#nav-drawer { 2 position: relative; 3 padding-right: 35px; 4 padding-top: 20px; 5} 6 7.nav-unshown { 8 display: none; 9} 10 11#nav-open { 12 display: inline-block; 13 width: 30px; 14 height: 22px; 15 vertical-align: middle; 16} 17 18#nav-open span, 19#nav-open span:before, 20#nav-open span:after { 21 position: absolute; 22 height: 3px; 23 width: 20px; 24 border-radius: 3px; 25 background: #5F2201; 26 display: block; 27 content: ''; 28 cursor: pointer; 29} 30 31#nav-open span:before { 32 bottom: -8px; 33} 34 35#nav-open span:after { 36 bottom: -16px; 37} 38 39#nav-close { 40 display: none; 41 position: fixed; 42 z-index: 99; 43 top: 0; 44 left: 0; 45 width: 100vw; 46 height: 100vh; 47 background: black; 48 opacity: 0; 49 transition: .3s ease-in-out; 50} 51 52#nav-content { 53 overflow: auto; 54 position: fixed; 55 top: 0; 56 left: 0; 57 z-index: 9999; 58 width: 90%; 59 max-width: 375px; 60 text-align: center; 61 height: 100%; 62 background: #ffffff; 63 transition: .3s ease-in-out; 64 -webkit-transform: translateX(-105%); 65 transform: translateX(-105%); 66} 67 68#nav-content ul { 69 padding-inline-start: 0; 70} 71 72#nav-content li { 73 list-style: none; 74 padding-top: 70px; 75 font-weight: bold; 76 color: #5F2201; 77} 78 79#nav-input:checked~#nav-close, 80#nav-input:checked~#nav-content>#btn-nav-close { 81 display: block; 82 opacity: .5; 83} 84 85#nav-input:checked~#nav-content>#btn-nav-close { 86 position: absolute; 87 top: 5vh; 88 right: 70px; 89 width: 50px; 90 height: 50px; 91 opacity: 1; 92} 93 94#btn-nav-close::before, 95#btn-nav-close::after { 96 content: ""; 97 position: absolute; 98 height: 2px; 99 width: 100%; 100 top: 50%; 101 left: 0; 102 background: #000; 103} 104 105#btn-nav-close::before { 106 transform: rotate(45deg); 107} 108 109#btn-nav-close::after { 110 transform: rotate(-45deg); 111} 112 113#nav-input:checked~#nav-content { 114 -webkit-transform: translateX(0%); 115 transform: translateX(0%); 116 box-shadow: 6px 0 25px rgba(0, 0, 0, 15); 117} 118

投稿2020/03/10 12:28

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こんな感じですかね? もしクラス名は好きなように変更してください。
https://codepen.io/new1ro/pen/jOPYQBp

HTML

1<div class="icon-close"></div>

CSS

1.icon-close { 2 position: relative; 3 width: 24px; /* ボタンのサイズ */ 4 height: 24px; /* ボタンのサイズ */ 5} 6.icon-close::before, 7.icon-close::after { 8 content: ""; 9 position: absolute; 10 top: 0; 11 right: 0; 12 bottom: 0; 13 left: 0; 14 margin: auto; 15 width: 100%; 16 height: 2px; /* 線の太さ */ 17 background: #000; /* 線の色 */ 18} 19.icon-close::before { 20 transform: rotate(45deg); 21} 22.icon-close::after { 23 transform: rotate(-45deg); 24}

投稿2020/03/10 12:27

編集2020/03/10 12:29
new1ro

総合スコア4528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問