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

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

ただいまの
回答率

89.65%

HTMLとCSSだけでハンバーガーメニューを作成し、ページ内リンクの時もメニューが自動的に消えるようにしたい

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 429

Ni_Hi727

score 5

前提・実現したいこと

HTMLとCSSでWebサイトを作成しているのですが、PCでは画面上部に横並びでメニュー項目を表示させ、スマートフォン等ではレスポンシブに対応させてハンバーガーメニューで表示するようにWebサイトを作成しているのですが、ページ内リンクだとメニューが自動的に消えず困っております。
ハンバーガーメニューについてはこちらのサイト( https://saruwakakun.com/html-css/reference/nav-drawer )を参考に作成してみました。

解決の為にこちらのサイト( https://haniwaman.com/css-modal-drawer/ )を参考にしながらHTMLやCSSのコードをいじっているのですが、自分が至らないせいで文字自体が消えてしまったり、メニューが消えるようになってもリンク先に飛ばなくなる等なかなか思うようにいかず悩んでおります。

※過去にもハンバーガーメニューがページ内リンクだと消えないといった質問にて「:focus-within」で解決できると拝見しましたが、うまく解決できなかった事とEdgeやIEでは未対応らしいとの事なので、「:focus-within」は使用せずに解決できれば助かります。また、HTMLとCSSだけで解決できればと思います。

見にくいソースだと思いますがお教え頂けると幸いです。
何卒宜しくお願い致します。

該当のソースコード

<body>
    <header>
    <div id="nav-drawer">
    <input id="nav-input" type="checkbox" class="nav-unshown">
    <label id="nav-open" for="nav-input"><span></span></label>
    <label id="nav-close" class="nav-unshown" for="nav-input"></label>

  <div id="nav-content">
    <nav>
      <input id="nav-input" type="checkbox" class="nav-unshown">
    <label id="nav-close" class="nav-unshown" for="nav-input"></label>
        <ul class="menu" id="menu">
          <li>
            <a href="***.html">
            <span>別ページへ</span>
            </a>
          </li>
          <li>
            <a href="#area1">
            <span>ページ内リンク1</span>
            </a>
          </li>
          <li>
            <a href="#area2">
              <label for="nav-input">
            <span>ページ内リンク2</span>
            </label>
            </a>
          </li>
          <li>
            <a href="#area3">
            <span>ページ内リンク3</span>
            </a>
          </li>
          <li>
            <a href="#area3">
            <span>ページ内リンク3</span>
            </a>
          </li>          
        </ul>
  </header>
  <div id="area1"></div>
  <div id="area2"></div>
  <div id="area3"></div>     
</body>
</html>
header{
    background-color: #ccc;
    height: 50px;
}

#area1{
    height: 400px;
    background-color: #b0c4de;
}

#area2{
    height: 600px;
    background-color: #e6e6fa;
}

#area3{
    height: 400px;
    background-color: #b0c4de;
}

.navi{
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

#nav-input {
    display: none;
}

nav .menu {
    display: -webkit-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
}

.menu {
    font-size: 1.6rem;
    list-style: none;
    overflow: hidden;
    padding-left: 0;
    width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 0;

}

.menu ul {
    list-style: none;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    justify-content: flex-end;
    margin-top: 0;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.menu li {
    display: inline-block;
    vertical-align: middle;
}

.menu li:first-child {
    margin-right: auto;
    margin-left: 2rem;
}


.menu li:last-child {
    margin-right: 2rem;
}

.menu li a {
    display: block;
    padding: 0px 20px 0px 20px;
    text-decoration: none;
}

.menu li a span {
    display: block;
}

.menu a:link {
    color: #00008b;
}

.menu a:hover {
    color: #4169e1;
}

.menu a:visited {
    color: #00008b;
}

#close{
    display: none;
}

@media screen and (max-width: 768px) {

    html {
        width: 100%;
        max-width: 767px;
        height: auto;
    }

    body {
        width: 100%;
        max-width: 767px;
        height: auto;
    }
    p {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 1.5rem;
    }

    .menu {
        width: 100%;
        height: auto;
        font-size: 1.2rem;
        padding: 1rem;
    }

    .menu li {
        width: 22%;
    }

    .menu li a {
        padding-left: 2%;
        padding-right: 2%;
    }

    .menu li:nth-child(2){
    display: block;
    }

    .menu li:last-child {
        width: 8%;
    }

    .menu li a span {
        font-size: 0.7rem;
        color: #00008b;
    }

/* ここからハンバーガーメニュー */

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

#nav-open {
    display: inline-block;
  width: 30px;
  height: 38px;
  vertical-align: middle;
  position: absolute;
  top: 1.5rem;
  right: 3rem;*/
}

#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 4px; /*線の太さ*/
  width: 25px; /*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*出てくるメニューの中身*/
  #nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/
  max-width: 200px;/*最大幅*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*閉じる用の薄黒カバー部分*/
#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-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示(右へスライド)*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/* クリックすると消える背景部分もここで表示 */
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

  /* ハンバーガーに入れたliの指定 */
    nav .menu {
    display: -webkit-block;
    display: block;
    -ms-align-items: center;
    align-items: center;
    }

    .menu li{
        width: 100%;
    }

    .menu li a span {
        color: #000;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

試したこと

https://haniwaman.com/css-modal-drawer/
こちらのサイトで「for=""」の要素を作れば増やしていけると解釈し、<li>の中に入力していたリンクの指定の辺りで<label for="nav-input">や<span for="nav-input">で囲んだり等やってみましたが、ページ内リンク先に移動する事とメニュー画面が消える事を同時に行う事ができませんでした。(「ページ内リンク2」の部分が「タップすると内部リンク先には飛ばないがメニューは消える」といった状態です)

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

現在の :checked を使うつくりではスクリプトを使わないとできませんが、使うのがおすすめです。
どうしても HTML + CSS ということであれば、近いものが :target でできるかもしれません。
https://developer.mozilla.org/ja/docs/Web/CSS/:target

メニュー内の input と label をすべて削除し、<a>を追加。

  <div id="nav-drawer">
    <!--input id="nav-input" type="checkbox" class="nav-unshown">
    <label id="nav-open" for="nav-input"><span></span></label>
    <label id="nav-close" class="nav-unshown" for="nav-input"></label-->
    <a id="nav-open" class="nav-unshown" href="#nav-content"><span></span></a>


</header> 直前に不足しているタグを補いつつ<a>を追加。

</nav></div><a href="#nav-close" id="nav-close" class="nav-unshown"></a></div>
  </header>

:checked を :target へ

/*#nav-input:checked ~ #nav-content {*/
#nav-content:target {
/*#nav-input:checked ~ #nav-close {*/
#nav-content:target ~ #nav-close {

閉じたり開いたりすると履歴が増えていってしまうのが難点です。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/06/21 21:54

    ご丁寧な回答をありがとうございます!
    なるほど、:checkedを使用する場合はスクリプトとの併用が必要なのですね。
    回答頂いた:targetを使用して試してみたところ、こちらで考えていたものに近い動作をするハンバーガーメニューができました!
    両方試してみたのですが、今回は:checkedとスクリプトを併用したものを使用する事になりました。
    :targetを使う方法は次回以降、作成するサイトによって使い分けていければと思います。
    大変勉強になりました。
    本当にありがとうございました。

    キャンセル

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

  • ただいまの回答率 89.65%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • HTMLに関する質問
  • HTMLとCSSだけでハンバーガーメニューを作成し、ページ内リンクの時もメニューが自動的に消えるようにしたい