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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

2764閲覧

チェックボックスを使ってCSSだけでハンバーガーメニューを作成したい

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2016/11/11 09:22

タイトルの通り、CSSだけでハンバーガーメニューを作成したく、こちらを参考に作成してみたのですが、うまくいきません。
問題点はmenu-backgroundのz-indexに負の数を与えているのに、クリックできてしまうために、ハンバーガーアイコンをクリックしなくても画面をクリックすれば、スライドメニューが表示されてしまうことです。
(ちなみに上記参考サイトとコピペしても同様の問題が発生してしまいました)

CSSだけでは実装は難しいのでしょうか?
下記にサンプルを用意しています。わかる方教えていただけると嬉しいです。
サンプル

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

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

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

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

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

MasahikoHirata

2016/11/11 09:51

上記と下記が添付されていないので何ともしようが無いです。
guest

回答2

0

じっくり見ればうまい解決策あるかもですが、帰り間際なので思いついた一例を投稿しておきます。
オーバーレイをかけてみるです。

css

1.overlay { 2 display: block; 3 height: 100%; 4 position: fixed; 5 right: 0; 6 top: 0; 7 width: 100%; 8 z-index: -9; 9}

html

1<input id='menu-check' class='menu-check' type='checkbox' value='off' style='display: none'> 2<label class='menu-icon' for='menu-check'></label> 3<label class='menu-background' for='menu-check'></label> 4<div class="overlay"></div> 5<div class='menu-block'> 6 <ul> 7 <a href='/food'><li>Food</li></a> 8 <a href='/travel'><li>Travel</li></a> 9 </ul> 10</div>

z-indexは構造をしっかり考えないと訳が分からないことになるので気を付けてコーディングしてくださいね。

投稿2016/11/11 10:16

gin

総合スコア2722

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

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

退会済みユーザー

退会済みユーザー

2016/11/12 03:54

いつも本当にありがとうございます。 overlayを使用したものだと、menu-backgroundはクリックされずに済むのですが、他のコンテンツもクリックできなくなってしまうという問題が生じたので、考えていたらmenu-backgroundもmenu-blockと同様画面の左側に隠しておいてメニューアイコンをクリックしたらスライドインさせることにしました。
gin

2016/11/12 04:15

一応検索でここにやってくる人用に補足しておきますね。 「できない」で終わると誤解をまねくので… 上記のコードのみだと特にクリックできないということはないです。 z-indexは兄弟要素での比較になるので単に数字の大小で考えてはダメです。 今回の例だとoverlayと兄弟要素になるようにコンテンツの要素を作りz-index:-8;以上であれば影響を受けません。
gin

2016/11/12 04:18

あと回答に関してですがオーバーレイかける方法でできることはできますが、何か納得いってなかったのでmenu-backgroundも隠せるのであればそっちのほうが余計なタグ入れずに済むのでいいと思います。
退会済みユーザー

退会済みユーザー

2016/11/12 08:22

z-indexについてきちんと理解できていませんでした。 いつもご丁寧な説明ありがとうございます。
guest

0

ベストアンサー

menu-backgroundもmenu-blockと同様画面の左側に隠しておいてメニューアイコンをクリックしたらスライドインさせることで解決

投稿2016/11/12 03:55

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問