質問: ### 前提・実現したいこと mmenuで後述のソースのように構築したのですが、 ハンバーガーボタンを押してスライドメニューが出た状態になると、 開く前にposition:fixedで固定されていたヘッダーが固定されなくなります。 ### 試してみた対処法 対処として、 .mm-opened #wrap { height: 100vh; } をつけましたが、これだと、 スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、 コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、 スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。 #menuの中に閉じるボタンを設置するデザインにしようとして、 ↓こちらのページを参考に後述のソースのように組み込んでみましたが、 Close the menuの部分をクリックしても閉じず、ボタンが効きませんでした。 ハンバーガーボタンが入っているheaderの固定ができなかったら、 #menu(.mm-menu)の中に閉じるボタンを設置することで対処する方法でも構いません。 何か対処方法をご存知の方がいらっしゃいましたら、 ご助言いただけると大変幸いです。 ### 該当のソースコード 下記ページへ現状を再現したものをUPしてみました。 (解決後削除いたします) ※前述の のように#menuの中に閉じるボタンを設置してみたものは にアップいたしました。 広告が出ていますが、スライドしてきたメニューの中のClose the menuが該当の箇所です。
回答: JSの問題については,s8_chuさんが調べてくれたようなので,私は代替案の方を書きます とりあえず``をパーツの分割に使うのはおかしいので,そこは修正してもらい, JSプラグインを使うと競合とか面倒なのでCSSで実装します こんな感じです(HTMLができるかぎりセマンティックになるようにしました) !イメージ説明 (右上の「リミックス」ボタンからコードの閲覧・編集ができます) 対応内容 * アコーディオンメニュー * メニュー開閉ボタン * メニュー枠外クリックでのメニュー終了 * アコーディオンに使ったラジオボタンの初期化 * メニュー内容の`overflow: auto;` * メニュー選択時のアニメーション(矢印) 解説(抜粋) ``` ≡ Section A Section A-1 Section A-2 Section A-3 Section B Section B-1 Section B-2 Section B-3 Section C Section C-1 Section C-2 Section C-3 ``` ``` /*アコーディオン*/ .child_menu >li{ overflow: hidden; height: 0; transition: .5s; } input[name="menu"]:checked ~.child_menu >li{ height: 3em; } ``` ``` /*メニュー開閉ボタン*/ #menu_btn_tgl{ position: absolute; top: 0; left: 100%; width: 50px; height: 50px; overflow: hidden; color: #fff; font-size: 50px; line-height: 50px; text-align: center; transition: left .5s; } /*ボタンの表示を書き換える*/ #menu_btn:checked +#menu_btn_tgl{ left: 200%; font-size: 0;/*元の文字を見えなくする*/ } #menu_btn:checked +#menu_btn_tgl::before{ content: "×";/*追加の文字*/ font-size: 50px; line-height: 50px; } #menu_btn:checked ~#menu_w{ transform: translateX(100%);/*自分自身の幅の分だけ,右側へスライド*/ box-shadow: 0 1em #fff, 0 0 10px; } ``` ``` /*メニュー枠外クリックでのメニュー終了*/ /*メニュー枠外いっぱいに広がる半透明の巨大ボタン*/ #menu_btn:checked +#menu_btn_tgl::after{ content: ""; position: fixed; top: 0; left: 0; z-index: -1; width: 100vw; height: 100vh; background: rgba(0,0,0,.1) } ``` ``` /*アコーディオンに使ったラジオボタンの初期化*/ /* You need to set these at last of a document. */ function offRadio() { var radios = document.querySelectorAll('[name="menu"]'); for(i=0; i