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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

解決済

CSSだけで実装したハンバーガーメニューを「×」以外に、メニューの領域外をクリックしても閉じるようにしたいです。

Belltan
Belltan

総合スコア1

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

3回答

0評価

1クリップ

357閲覧

投稿2022/06/17 08:54

編集2022/06/18 09:21

FC2ホームページ作成機能を利用して、JSは使わずにCSSだけでハンバーガーメニューを実装しているんですが、ハンバーガーメニューが展開中に「×」をクリックする以外に、ハンバーガーメニューの領域外をクリックしても閉じられるようにしたいのですが、どのようにすればいいのか分かりません。

今利用している機能がJSが反応しないことがあるため、できればCSSとHTMLだけで解決したいのですが、調べてもよく分かりませんでした。

今実装しているコードはこれです。(字数制限オーバーのため、CSSのコードを一部”上と同じ”と省略しました。)

お詳しい方、お知恵を拝借願います。

HTML

<content> <input id="hamburger" class="hamburger" type="checkbox"/> <label class="hamburger" for="hamburger"> <i></i> <text> <close>close</close> <open>menu</open> </text> </label> <section class="drawer-list"> <ul> <li><a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">メニュー1<font size="1">サブメニュー1</font></a></li> <li><a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">メニュー2<font size="1">サブメニュー2</font></a></li> <li><a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">メニュー3<font size="1">サブメニュー3</font></a></li> </ul> </section> </content>

CSS

.drawer-list{ z-index: 2; } ul { list-style: none; margin: 0; padding: 0; } .drawer-list { position: fixed; right: 0; top: 0; height: 100vh; width: 60vw; transform: translate(100vw, 0); /* ie workaround */ -ms-transform: translatex(-100vw); box-sizing: border-box; pointer-events: none; padding-top: 50px; transition: width 475ms ease-out, transform 480ms ease, border-radius 0.8s 0.1s ease; border-bottom-left-radius: 100vw; background-color: red; background-color:rgba(254,244,244,0.9); } @media (min-width: 768px) { .drawer-list { width: 40vw; } } .drawer-list ul { height: 100%; width: 100%; margin: 0; padding: 0; overflow: auto; overflow-x: hidden; pointer-events: auto; } .drawer-list li { list-style: none; text-transform: uppercase; pointer-events: auto; white-space: nowrap; box-sizing: border-box; transform: translatex(100vw); /* ie workaround */ -ms-transform: translatex(-100vw); } .drawer-list li:last-child { margin-bottom: 2em; } .drawer-list li a { text-decoration: none; color: #622d18; text-align: left; display: block; padding: 1rem; font-size: calc(24px - .5vw); } @media (min-width: 768px) { .drawer-list li a { text-align: right; padding: 0.5rem; } } .drawer-list li a:hover { cursor: pointer; background-color: red; background-color:rgba(245,178,178,0.4); } input.hamburger { display: none; } input.hamburger:checked ~ .drawer-list { transform: translatex(0); border-bottom-left-radius: 0; } input.hamburger:checked ~ .drawer-list li { transform: translatex(0); } input.hamburger:checked ~ .drawer-list li:nth-child(1) { transition: transform 1s 0.08s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(2) { transition: transform 1s 0.16s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(3) { transition: transform 1s 0.24s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(4) { transition: transform 1s 0.32s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(5) { transition: transform 1s 0.4s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(6) { transition: transform 1s 0.48s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(7) { transition: transform 1s 0.56s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(8) { transition: transform 1s 0.64s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(9) { transition: transform 1s 0.72s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(10) { transition: transform 1s 0.8s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(11) { transition: transform 1s 0.88s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(12) { transition: transform 1s 0.96s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(13) { transition: transform 1s 1.04s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(14) { transition: transform 1s 1.12s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(15) { transition: transform 1s 1.2s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(16) { transition: transform 1s 1.28s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(17) { transition: transform 1s 1.36s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(18) { transition: transform 1s 1.44s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(19) { transition: transform 1s 1.52s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(20) { transition: transform 1s 1.6s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(21) { transition: transform 1s 1.68s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(22) { transition: transform 1s 1.76s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(23) { transition: transform 1s 1.84s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(24) { transition: transform 1s 1.92s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(25) { transition: transform 1s 2s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(26) { transition: transform 1s 2.08s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(27) { transition: transform 1s 2.16s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(28) { transition: transform 1s 2.24s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(29) { transition: transform 1s 2.32s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(30) { transition: transform 1s 2.4s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(31) { transition: transform 1s 2.48s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(32) { transition: transform 1s 2.56s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(33) { transition: transform 1s 2.64s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(34) { transition: transform 1s 2.72s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(35) { transition: transform 1s 2.8s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(36) { transition: transform 1s 2.88s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(37) { transition: transform 1s 2.96s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(38) { transition: transform 1s 3.04s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(39) { transition: transform 1s 3.12s cubic-bezier(0.29, 1.4, 0.44, 0.96); } input.hamburger:checked ~ .drawer-list li:nth-child(40) { transition: transform 1s 3.2s cubic-bezier(0.29, 1.4, 0.44, 0.96); } ”上と同じ”(41) { ”上と同じ” 3.28s ”上と同じ” } ”上と同じ”(42) { ”上と同じ” 3.36s ”上と同じ” } ”上と同じ”(43) { ”上と同じ” 3.44s ”上と同じ” } ”上と同じ”(44) { ”上と同じ” 3.52s ”上と同じ” } ”上と同じ”(45) { ”上と同じ” 3.6s ”上と同じ” } ”上と同じ”(46) { ”上と同じ” 3.68s ”上と同じ” } ”上と同じ”(47) { ”上と同じ” 3.76s ”上と同じ” } ”上と同じ”(48) { ”上と同じ” 3.84s ”上と同じ” } ”上と同じ”(49) { ”上と同じ” 3.92s ”上と同じ” } ”上と同じ”(50) { ”上と同じ” 4s ”上と同じ” } input.hamburger:checked ~ .drawer-list li a { padding-right: 15px; } input.hamburger:checked ~ label > i { background-color: transparent; transform: rotate(90deg); } input.hamburger:checked ~ label > i:before { transform: translate(-50%, -50%) rotate(315deg); } input.hamburger:checked ~ label > i:after { transform: translate(-50%, -50%) rotate(-315deg); } input.hamburger:checked ~ label close { color: #622d18; width: 100%; } input.hamburger:checked ~ label open { color: rgba(0, 0, 0, 0); width: 0; } label.hamburger { z-index: 9999; position: relative; display: block; height: 400px; width: 50px; } label.hamburger:hover { cursor: pointer; } label.hamburger text close, label.hamburger text open { text-transform: uppercase; font-size: 0.8em; align-text: center; position: absolute; transform: translateY(220px); text-align: center; overflow: hidden; transition: width 0.25s 0.35s, color 0.45s 0.35s; } label.hamburger text close { color: rgba(0, 0, 0, 0); right: 0; width: 0; } label.hamburger text open { color: #622d18; width: 100%; } label.hamburger > i { position: absolute; width: 100%; height: 2px; top: 50%; background-color: #622d18; pointer-events: auto; transition-duration: 0.35s; transition-delay: 0.35s; } label.hamburger > i:before, label.hamburger > i:after { position: absolute; display: block; width: 100%; height: 2px; left: 50%; background-color: #622d18; content: ""; transition: transform 0.35s; transform-origin: 50% 50%; } label.hamburger > i:before { transform: translate(-50%, -14px); } label.hamburger > i:after { transform: translate(-50%, 14px); } label.hamburger { position: fixed; top: 15px; right: 15px; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

yambejp

2022/06/17 09:07

そもそもonclickが書いてありますので「CSSだけで実装したハンバーガーメニュー」では無いと思いますが・・・
Belltan

2022/06/17 09:19 編集

すみません。回答ありがとうございます。 JSのシートに下記の内容だけ入力しているのですが、お恥ずかしながら入力したときのことを忘れてしまい専門知識もなく、なんのコードか分からなくなっています・・; 質問内容に記載しましたコードも全てネットからコピペしたものでして、独学で少し勉強してみましたが私には難しく、1つ1つ内容を詳しく理解しきれていないのが現状です・・・。 もし関係があるのなら、質問内容を訂正したいと思いますので、恐縮ですがご教示いただけますと幸いです。 $(function(){ var _window = $(window), _header = $('.tabs'), logoBottom; _window.on('scroll',function(){ logoBottom = $('.logo').height(); if(_window.scrollTop() > logoBottom){ _header.addClass('fixed'); } else{ _header.removeClass('fixed'); } }); _window.trigger('scroll'); });

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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