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

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

ただいまの
回答率

87.33%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,219

score 15

前提・実現したいこと

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

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

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

該当のソースコード

<div id="nav-drawer">
                <input id="nav-input" type="checkbox" class="nav-unshown">
                <label id="nav-open" for="nav-input"><span></span></label>
                <label class="nav-unshown" id="nav-close" for="nav-input"></label>
                <div id="nav-content">
                    <ul>
                        <li>Skill</li>
                         <li>About</li>
                        <li>Contact</li>
                    </ul>
                </div>
            </div>
#nav-drawer{
    position: relative;
    padding-right: 35px;
    padding-top: 20px;
}

.nav-unshown {
    display: none;
}

#nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
}

#nav-open span, #nav-open span:before,#nav-open span:after {
    position: absolute;
    height: 3px;
    width: 20px;
    border-radius: 3px;
    background: #5F2201;
    display: block;
    content: '';
    cursor: pointer;
}

#nav-open span:before {
    bottom: -8px;   
}

#nav-open span:after {
    bottom: -16px;
}

#nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 90%;
    max-width: 375px;
    text-align: center;
    height: 100%;
    background: #ffffff;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
}

#nav-content ul {
    padding-inline-start: 0;
}

#nav-content li {
    list-style: none;
    padding-top: 70px;
    font-weight: bold;
    color: #5F2201;
}

#nav-input:checked ~ #nav-close {
    display: block;
    opacity: .5;
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0, 0, 0, 15);
}

試したこと

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/03/10 15:56

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

    キャンセル

  • shuto0901

    2020/03/10 21:05

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

    キャンセル

  • m.ts10806

    2020/03/10 21:06

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

    キャンセル

  • shuto0901

    2020/03/10 21:19

    こちらが現在のハンバーガーメニューのサンプルです。
    https://saruwakakun.com/html-css/reference/nav-drawer
    他に
    https://q-az.net/hamburger-menu-only-css/

    https://lab.sonicmoov.com/markup/css/hamburgers/

    https://manabiact.com/make-hamburger-menu/
    上記のようなサイトを「ハンバーガーメニュー CSSのみ ×印」などの検索ワードで調べました。
    よろしくお願いします。

    キャンセル

回答 3

checkベストアンサー

+1

作例

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

<label for="nav-input" class="close"><span class="close-icon"></span></label>
.close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  cursor: pointer;
}

.close-icon::before {
  content: "";
  display: block;
  width: 16px;
  height: 2px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #5f2201;
  position: absolute;

}

.close-icon::after {
  content: "";
  display: block;
  height: 16px;
  width: 2px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;  background: #5f2201;
  position: absolute;
}

解説

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/10 23:35

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

    キャンセル

+1

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

<div class="icon-close"></div>
.icon-close {
  position: relative;
  width: 24px; /* ボタンのサイズ */
  height: 24px; /* ボタンのサイズ */
}
.icon-close::before,
.icon-close::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 2px; /* 線の太さ */
  background: #000; /* 線の色 */
}
.icon-close::before {
  transform: rotate(45deg);
}
.icon-close::after {
  transform: rotate(-45deg);
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

<div id="nav-drawer">
  <input id="nav-input" type="checkbox" class="nav-unshown">
  <label id="nav-open" for="nav-input"><span></span></label>
  <label class="nav-unshown" id="nav-close" for="nav-input"></label>
  <div id="nav-content">
  <label class="nav-unshown" id="btn-nav-close" for="nav-input"></label>
    <ul>
      <li>Skill</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </div>
</div>
#nav-drawer {
  position: relative;
  padding-right: 35px;
  padding-top: 20px;
}

.nav-unshown {
  display: none;
}

#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

#nav-open span,
#nav-open span:before,
#nav-open span:after {
  position: absolute;
  height: 3px;
  width: 20px;
  border-radius: 3px;
  background: #5F2201;
  display: block;
  content: '';
  cursor: pointer;
}

#nav-open span:before {
  bottom: -8px;
}

#nav-open span:after {
  bottom: -16px;
}

#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 375px;
  text-align: center;
  height: 100%;
  background: #ffffff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}

#nav-content ul {
  padding-inline-start: 0;
}

#nav-content li {
  list-style: none;
  padding-top: 70px;
  font-weight: bold;
  color: #5F2201;
}

#nav-input:checked~#nav-close,
#nav-input:checked~#nav-content>#btn-nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked~#nav-content>#btn-nav-close {
  position: absolute;
  top: 5vh;
  right: 70px;
  width: 50px;
  height: 50px;
  opacity: 1;
}

#btn-nav-close::before,
#btn-nav-close::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  background: #000;
}

#btn-nav-close::before {
  transform: rotate(45deg);
}

#btn-nav-close::after {
  transform: rotate(-45deg);
}

#nav-input:checked~#nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0, 0, 0, 15);
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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