JSの問題については，s8_chuさんが調べてくれたようなので，私は代替案の方を書きます
とりあえず<iframe>をパーツの分割に使うのはおかしいので，そこは修正してもらい，
JSプラグインを使うと競合とか面倒なのでCSSで実装します
こんな感じです（HTMLができるかぎりセマンティックになるようにしました）
https://thimbleprojects.org/liveasnotes/536993/
（右上の「リミックス」ボタンからコードの閲覧・編集ができます）
対応内容
- アコーディオンメニュー
- メニュー開閉ボタン
- メニュー枠外クリックでのメニュー終了
- アコーディオンに使ったラジオボタンの初期化
- メニュー内容の
overflow: auto;
- メニュー選択時のアニメーション（矢印）
解説（抜粋）
html
1<!--こういうHTMLに-->
2
3<nav ui>
4 <input type="checkbox" id="menu_btn" dn>
5 <label id="menu_btn_tgl" for="menu_btn">≡</label>
6 <ul id="menu_w">
7 <li>
8 <input type="radio" name="menu" id="c_menu_A" dn>
9 <label for="c_menu_A">Section A</label>
10 <ul class="child_menu">
11 <li><a href="#sA-1">Section A-1</a></li>
12 <li><a href="#sA-2">Section A-2</a></li>
13 <li><a href="#sA-3">Section A-3</a></li>
14 </ul>
15 </li>
16 <li>
17 <input type="radio" name="menu" id="c_menu_B" dn>
18 <label for="c_menu_B">Section B</label>
19 <ul class="child_menu">
20 <li><a href="#sB-1">Section B-1</a></li>
21 <li><a href="#sB-2">Section B-2</a></li>
22 <li><a href="#sB-3">Section B-3</a></li>
23 </ul>
24 </li>
25 <li>
26 <input type="radio" name="menu" id="c_menu_C" dn>
27 <label for="c_menu_C">Section C</label>
28 <ul class="child_menu">
29 <li><a href="#sC-1">Section C-1</a></li>
30 <li><a href="#sC-2">Section C-2</a></li>
31 <li><a href="#sC-3">Section C-3</a></li>
32 </ul>
33 </li>
34 </ul>
35
css
1/*アコーディオン*/
2
3.child_menu >li{
4 overflow: hidden;
5 height: 0;
6 transition: .5s;
7}
8input[name="menu"]:checked ~.child_menu >li{
9 height: 3em;
10}
11
css
1/*メニュー開閉ボタン*/
2
3#menu_btn_tgl{
4 position: absolute;
5 top: 0;
6 left: 100%;
7 width: 50px;
8 height: 50px;
9 overflow: hidden;
10 color: #fff;
11 font-size: 50px;
12 line-height: 50px;
13 text-align: center;
14 transition: left .5s;
15}
16/*ボタンの表示を書き換える*/
17#menu_btn:checked +#menu_btn_tgl{
18 left: 200%;
19 font-size: 0;/*元の文字を見えなくする*/
20}
21#menu_btn:checked +#menu_btn_tgl::before{
22 content: "×";/*追加の文字*/
23 font-size: 50px;
24 line-height: 50px;
25}
26
27#menu_btn:checked ~#menu_w{
28 transform: translateX(100%);/*自分自身の幅の分だけ，右側へスライド*/
29 box-shadow: 0 1em #fff, 0 0 10px;
30}
31
css
1/*メニュー枠外クリックでのメニュー終了*/
2
3/*メニュー枠外いっぱいに広がる半透明の巨大ボタン*/
4#menu_btn:checked +#menu_btn_tgl::after{
5 content: "";
6 position: fixed;
7 top: 0;
8 left: 0;
9 z-index: -1;
10 width: 100vw;
11 height: 100vh;
12 background: rgba(0,0,0,.1)
13}
14
js
1/*アコーディオンに使ったラジオボタンの初期化*/
2
3/* You need to set these at last of a document. */
4
5function offRadio() {
6 var radios = document.querySelectorAll('[name="menu"]');
7 for(i=0; i<radios.length; i++){
8 radios[i].checked = false;
9 }
10}
11
12document.getElementById('menu_btn_tgl').addEventListener('click', offRadio);
13
css
1/*メニュー内容のoverflow: auto;*/
2#menu_w{
3 width: 200px;
4 height: calc(100vh - 1em);
5 overflow-x: hidden;/*y方向のscrollだけ許可*/
6 background: #fff;
7 padding: 1em;
8 box-shadow: 0 1em #fff;
9 transition: .5s;
10}
11
css
1/*メニュー選択時のアニメーション*/
2
3label[for^="c_menu"]{
4 position: relative;
5}
6label[for^="c_menu"]::after{
7 content: "";
8 position: absolute;
9 top: .9em;
10 right: 1em;
11 display: block;
12 width: 1em;
13 height: 1em;
14 background-size: 1em 7px, 7px 1em;
15 background-position: -1em calc(1em - 7px), calc(1em - 7px) 1em;
16 background-image:
17 linear-gradient(90deg, #aaa 0%, #aaa 100%),
18 linear-gradient(0deg, #aaa 0%, #aaa 100%);
19 background-repeat: no-repeat;
20 transform: rotateZ(45deg);
21}
22input[name="menu"]:checked +label[for^="c_menu"]::after{
23 animation: c_menu_after .5s linear forwards;
24}
25@keyframes c_menu_after{
26 50%{
27 background-position: 0 calc(1em - 7px), calc(1em - 7px) 1em;
28 }
29 50.1%{
30 background-position: 0 calc(1em - 7px), calc(1em - 7px) .5em;
31 }
32 100%{
33 background-position: 0 calc(1em - 7px), calc(1em - 7px) 0;
34 }
35}
36
という感じです
Keywords:
- 擬似要素（
::before,::after）
- 擬似クラス（特に
:checked）
- 隣接セレクタ（
+）
- 兄弟セレクタ（
~）
- 属性セレクタ（
[]）
user-selectで文字を選択不可にbackground系プロパティの複数指定linear-gradient()による背景画像(グラデーション)生成transformプロパティの活用rgba()による色指定@keyframesによるアニメーションelement.checkedでのチェック状態の確認・上書きaddEventListener()による関数の実行
など
細かい説明はちょっと書ききれないですが，こういうやり方もあるんだということぐらいは知っておいても良いかなと思います
ほぼHTMLとCSSで実装し，唯一書いたJSがこれ↓だけなので，かなりクリーンなソースになったように思います
js
1function offRadio() {
2 var radios = document.querySelectorAll('[name="menu"]');
3 for(i=0; i<radios.length; i++){
4 radios[i].checked = false;
5 }
6}
7
8document.getElementById('menu_btn_tgl').addEventListener('click', offRadio);
代わりにCSSが若干長めですが，慣れればこっちのが楽なので，余力があればお試しください
（CSSの力を布教したい）
あ，ちなみにiframeでパーツを分けるデメリットとして，読み込みが少し遅くなる，SEOに弱くなるかも，コードがバラバラになって管理しづらい，iframe内の操作が若干面倒，iframe内のイベントを他の要素に影響させる方法が面倒，などが挙げられます．
いろいろと不自由になりがちなので，ふつうに直接HTMLを記述する方が良いかなと思います
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/02 17:44
2018/09/04 07:43
2018/09/05 00:50
2018/09/13 13:04