質問編集履歴

1 試してみたJavaScriptについて、消してしまったのであやふやですが追記しました

cinnamonbunny

cinnamonbunny score 7

2019/03/28 16:27  投稿

スマホ用ハンバーガーメニューの開閉について
### 前提・実現したいこと
レスポンシブのスマホ用に、ハンバーガーメニューを設置したいと思っています。
### 発生している問題・エラーメッセージ
ハンバーガーメニュー内のページ内リンクをクリックしてもメニューが開いたまま
### 該当のソースコード
```HTML
<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><a href="#sec01">テキスト</a></li>
             <li><a href="#sec02">テキスト</a></li>
             <li><a href="#sec03">テキスト</a></li>
             <li><a href="#sec04">テキスト</a></li>
             <li><a href="#sec05">テキスト</a></li>
         </ul>
     </div>
</div>
```
```CSS
#nav-drawer {
 position: relative;
}
/*チェックボックス等は非表示に*/
.nav-unshown {
 display:none;
}
/*アイコンのスペース*/
#nav-open {
 display: inline-block;
 width: 30px;
 height: 22px;
 vertical-align: middle;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
 position: absolute;
 height: 3px;/*線の太さ*/
 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-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: 330px;/*最大幅(調整してください)*/
 height: 100%;
 background: #fff;/*背景色*/
 transition: .3s ease-in-out;/*滑らかに表示*/
 -webkit-transform: translateX(-105%);
 transform: translateX(-105%);/*左に隠しておく*/
}
/*チェックが入ったらもろもろ表示*/
#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);
}
@media screen and (min-width:640px) {
 #nav-open {
   display:none;
 }
}
```
```Javascript  
$(function(){  
    $('#nav-input a').on('click', function() {  
        ('#nav-input,#nav-close').toggleClass('checked');  
        document.getElementById("nav-input,nav-close").style.display ="none";  
     })  
   });  
 
```  
### 試したこと
JavaScriptを調べて試してみたのですが、メニューが閉じても再度開けなくなったりして
わからなくなってしまいました。
  • JavaScript

    26544 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    15862 questions

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

  • CSS

    10783 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る