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

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

ただいまの
回答率

88.22%

mmenuで横からメニューが出た時にハンバーガーボタンにposition:fixedが効かなくなる

解決済

回答 3

投稿 編集

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

webwebweb

score 8

 前提・実現したいこと

mmenuで後述のソースのように構築したのですが、
ハンバーガーボタンを押してスライドメニューが出た状態になると、
開く前にposition:fixedで固定されていたヘッダーが固定されなくなります。

 試してみた対処法

対処として、
.mm-opened #wrap {
height: 100vh;
}
をつけましたが、これだと、
スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、
コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、
スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。

#menuの中に閉じるボタンを設置するデザインにしようとして、
↓こちらのページを参考に後述のソースのように組み込んでみましたが、
https://teratail.com/questions/68466

<a href="#my-page">Close the menu</a>の部分をクリックしても閉じず、ボタンが効きませんでした。
ハンバーガーボタンが入っているheaderの固定ができなかったら、
#menu(.mm-menu)の中に閉じるボタンを設置することで対処する方法でも構いません。

何か対処方法をご存知の方がいらっしゃいましたら、
ご助言いただけると大変幸いです。

 該当のソースコード

下記ページへ現状を再現したものをUPしてみました。
(解決後削除いたします)
http://saigentest.ojaru.jp/
※前述のhttps://teratail.com/questions/68466 のように#menuの中に閉じるボタンを設置してみたものは
http://saigentest.ojaru.jp/index2.html にアップいたしました。
広告が出ていますが、スライドしてきたメニューの中の<a href="#my-page">Close the menu</a>が該当の箇所です。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+3

今回は、http://saigentest.ojaru.jp/のコードを編集してこの問題を解決していきます。

上記のリンク先のページを見ると、質問者さんがぶつかっている問題は、以下の2つだということになりますね。

  1. スライドメニューが出ると、コンテンツの先頭まで移動してしまう。
  2. スライドメニューが出ると、position: fixedで固定されていたヘッダーが消える。
  • 1つ目は、質問文にて記述されている.mm-opened #wrapに付与したheightプロパティを削除することで解決すると思います。

  • 2つ目は、fixedElementsというアドオンを使って、スライドメニューが表示された後もヘッダーが表示されるようにすることで解決できます。

この2つを行った結果、最終的なコードは以下のようになります。
もしも、質問者さんが上の手順でコードを修正しても問題が解決しないときは、以下のコードを実行してみてください。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="http://saigentest.ojaru.jp/common.css">
    <link rel="stylesheet" href="http://saigentest.ojaru.jp/slick.css">
    <link rel="stylesheet" href="http://saigentest.ojaru.jp/slick-theme.css">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/css/jquery.mmenu.all.min.css">
    <title>タイトル</title>
    <style>
        .mm-opened #wrap {
            height: auto;
        }
    </style>
</head>
<body>

<a id="top"></a>
<div id="wrap">
    <div id="main">
        <header class="Fixed">
            <div id="h1">
                <h1>&nbsp;</h1>
            </div>
            <a class="menu-btn" href="#menu"></a>
            <iframe id="iHeaderSp" src="http://saigentest.ojaru.jp/header.html"></iframe>
        </header>
        <main>
            <ul class="slider wideslider">
                <li><a href="#" target="_blank"><img src="http://saigentest.ojaru.jp/img/main1.jpg"></a>
                <li><a href="#" target="_blank"><img src="http://saigentest.ojaru.jp/img/main2.jpg"></a>
            </ul>
            <div class="spaceWrap">
                <p style="padding:10px; margin-bottom:10px; background-color:#A0D2D8;">
                    スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、<br>
                    コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、<br>
                    スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。</p>
                <p style="padding:10px; margin-bottom:10px;">スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、<br>
                    コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、<br>
                    スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。</p>
                <p style="padding:10px; margin-bottom:10px; background-color:#FFE1E1;">
                    スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、<br>
                    コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、<br>
                    スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。</p>
                <p style="padding:10px; margin-bottom:10px;">スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、<br>
                    コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、<br>
                    スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。</p>
                <p style="padding:10px; margin-bottom:10px; background-color:#B5D0AE;">
                    スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、<br>
                    コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、<br>
                    スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。</p>
                <p style="padding:10px; margin-bottom:10px;">スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、<br>
                    コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、<br>
                    スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。</p>
                <p style="padding:10px; margin-bottom:10px; background-color:#EAE3AC;">
                    スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、<br>
                    コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、<br>
                    スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。</p>
                <p style="padding:10px; margin-bottom:10px;">スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、<br>
                    コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、<br>
                    スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。</p>
                <p style="padding:10px; margin-bottom:10px; background-color:#E2DBEC;">
                    スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、<br>
                    コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、<br>
                    スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。</p>
                <p style="padding:10px; margin-bottom:10px;">スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、<br>
                    コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、<br>
                    スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。</p>
                <p style="padding:10px; margin-bottom:10px; background-color:#A8FFE2;">
                    スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、<br>
                    コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、<br>
                    スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。</p>
                <p style="padding:10px; margin-bottom:10px;">スクロールしてコンテンツの途中までいってハンバーガーボタン押してスライドメニューが出てきたとしても、<br>
                    コンテンツ本体部分(.mm-page)の先頭が表示され(先頭に戻るかたち)、<br>
                    スライドメニューを閉じた後、スクロールして行ったところの続きから閲覧することができません。</p>
            </div>
        </main>
    </div>
    <footer>
        <div id="goTop">
            <a href="#top"><br> TOP</a>
        </div>
    </footer>
</div>
<nav id="menu" class="menuArea">
    <iframe id="iSlideMenu" src="http://saigentest.ojaru.jp/leftnavi.html"></iframe>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/js/jquery.mmenu.all.min.js"></script>
<script src="http://saigentest.ojaru.jp/slick.min.js"></script>
<script>
    $(function () {
        $("#hdload").load("header.html #header");

        $('#menu').mmenu({
            slidingSubmenus: false
        });

        $('a[href^="#"]:not([href*="menu"])').on("click", function () {
            var speed = 1000;
            var href = $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top - 55 + 'px';
            $("html, body").animate({
                scrollTop: position
            }, speed, "swing");
            return false;
        });

        $(window).on('scroll', function () {
            if ($(this).scrollTop() > 1) {
                $('body').addClass('fixed');
            } else {
                $('body').removeClass('fixed');
            }
        });

        $('.wideslider').slick({
            dots: true,
            slidesToShow: 1,
            autoplay: true,
            responsive: [{
                settings: {}
            }]
        });
    });
</script>
</body>
</html>

参考
Tips and tricks - jQuery.mmenu

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/03 02:44

    あと、もしよろしければ、使用しているライブラリのバージョンを教えていただけませんか?

    キャンセル

  • 2018/09/04 16:43

    s8_chu様

    知識の深くないものでもわかりやすく解説いただき、誠にありがとうございます。

    せっかく詳細に丁寧にご助言いただいたところ、
    大変申し訳ございません。

    こちらの再現に何か不備があるのだと思うのですが、
    再現してみましたが、成功いたしませんでした。

    公開していただいたコードをそのままコピーし、
    一部だけ変更して実行してみましたが、成功いたしませんでした。
    下記に実行したものをアップしてみました。

    http://saigentest.ojaru.jp/index3.html

    ・<link rel="stylesheet" href="jquery.mmenu.all.min.css">を
     jquery.mmenu.all.min.cssというものがmmenuで配布されているのを見つけることができなかったため、
     <link rel="stylesheet" href="jquery.mmenu.all.css">にこちらで変更しました。

    ・<script src="jquery.min.js">を
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
     にこちらで変更しました。

    ・<script src="jquery.mmenu.all.min.js">を
     jquery.mmenu.all.min.jsというものがmmenuで配布されているのを見つけることができなかったため、
     <script src="jquery.mmenu.min.js">にこちらで変更しました。
     また、jquery.mmenu.min.jsではなくjquery.mmenu.all.jsで試してみたところ、
     mmenu自体がうまく動かなかったため、jquery.mmenu.min.jsにいたしました。

    また、

    http://saigentest.ojaru.jp/

    <script src="jquery.mmenu.fixedelements.js"></script>と
    $("#menu").mmenu({
    slidingSubmenus: false
    }, {
    // configuration
    classNames: {
    fixedElements: {
    fixed: "fix",
    sticky: "stick"
    }
    }
    });

    <style>
    .mm-opened #wrap {height: auto;}
    </style>
    を追記してみましたが、それでも動きませんでした。

    加えて、「ライブラリのバージョン」とは、
    https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js」のことでしょうか。
    無知でまことにお手数をおかけいたします。

    詳細にご解説いただいたにも関わらず、うまく再現できず申し訳ございません。
    度々お手を煩わせて申し訳ございませんが、
    ここからどう改善すればもしご助言いただけるなら大変幸いでございます。
    今回のご助言に対しましてもご親切ありがとうございました。

    キャンセル

  • 2018/09/05 09:50

    回答文のコードを修正しました。
    コピペすれば動くと思うので、一度確認してみてください。

    キャンセル

  • 2018/09/13 22:04

    リアクションが遅くなり申し訳ございません。
    再現用のサイトでは綺麗に動作しました!ありがとうございます!
    実際のサイト(ECサイト)ではモールの自動挿入されてしまうJSが干渉しているのか、
    正常に動かないため、あとはいろいろと調節してみます!
    今回ご検証とソース考案いただいたことで大きく進歩しました!
    感謝申し上げます。ありがとうございました!

    キャンセル

+1

JSの問題については,s8_chuさんが調べてくれたようなので,私は代替案の方を書きます

とりあえず<iframe>をパーツの分割に使うのはおかしいので,そこは修正してもらい,
JSプラグインを使うと競合とか面倒なのでCSSで実装します

こんな感じです(HTMLができるかぎりセマンティックになるようにしました)
https://thimbleprojects.org/liveasnotes/536993/
イメージ説明
(右上の「リミックス」ボタンからコードの閲覧・編集ができます)

対応内容

  • アコーディオンメニュー
  • メニュー開閉ボタン
  • メニュー枠外クリックでのメニュー終了
  • アコーディオンに使ったラジオボタンの初期化
  • メニュー内容のoverflow: auto;
  • メニュー選択時のアニメーション(矢印)

解説(抜粋)

<!--こういうHTMLに-->

<nav ui>
  <input type="checkbox" id="menu_btn" dn>
  <label id="menu_btn_tgl" for="menu_btn"></label>
  <ul id="menu_w">
    <li>
      <input type="radio" name="menu" id="c_menu_A" dn>
      <label for="c_menu_A">Section A</label>
      <ul class="child_menu">
        <li><a href="#sA-1">Section A-1</a></li>
        <li><a href="#sA-2">Section A-2</a></li>
        <li><a href="#sA-3">Section A-3</a></li>
      </ul>
    </li>
    <li>
      <input type="radio" name="menu" id="c_menu_B" dn>
      <label for="c_menu_B">Section B</label>
      <ul class="child_menu">
        <li><a href="#sB-1">Section B-1</a></li>
        <li><a href="#sB-2">Section B-2</a></li>
        <li><a href="#sB-3">Section B-3</a></li>
      </ul>
    </li>
    <li>
      <input type="radio" name="menu" id="c_menu_C" dn>
      <label for="c_menu_C">Section C</label>
      <ul class="child_menu">
        <li><a href="#sC-1">Section C-1</a></li>
        <li><a href="#sC-2">Section C-2</a></li>
        <li><a href="#sC-3">Section C-3</a></li>
      </ul>
    </li>
  </ul>
/*アコーディオン*/

.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<radios.length; i++){
    radios[i].checked = false;
  }
}

document.getElementById('menu_btn_tgl').addEventListener('click', offRadio);
/*メニュー内容のoverflow: auto;*/
#menu_w{
  width: 200px;
  height: calc(100vh - 1em);
  overflow-x: hidden;/*y方向のscrollだけ許可*/
  background: #fff;
  padding: 1em;
  box-shadow: 0 1em #fff;
  transition: .5s;
}
/*メニュー選択時のアニメーション*/

label[for^="c_menu"]{
  position: relative;
}
label[for^="c_menu"]::after{
  content: "";
  position: absolute;
  top: .9em;
  right: 1em;
  display: block;
  width: 1em;
  height: 1em;
  background-size: 1em 7px, 7px 1em;
  background-position: -1em calc(1em - 7px), calc(1em - 7px) 1em;
  background-image:
    linear-gradient(90deg, #aaa 0%, #aaa 100%),
    linear-gradient(0deg, #aaa 0%, #aaa 100%);
  background-repeat: no-repeat;
  transform: rotateZ(45deg);
}
input[name="menu"]:checked +label[for^="c_menu"]::after{
  animation: c_menu_after .5s linear forwards;
}
@keyframes c_menu_after{
  50%{
    background-position: 0 calc(1em - 7px), calc(1em - 7px) 1em;
  }
  50.1%{
    background-position: 0 calc(1em - 7px), calc(1em - 7px) .5em;
  }
  100%{
    background-position: 0 calc(1em - 7px), calc(1em - 7px) 0;
  }
}


という感じです


Keywords:

  • 擬似要素(::before,::after
  • 擬似クラス(特に:checked
  • 隣接セレクタ(+
  • 兄弟セレクタ(~
  • 属性セレクタ([]
  • user-selectで文字を選択不可に
  • background系プロパティの複数指定
  • linear-gradient()による背景画像(グラデーション)生成
  • transformプロパティの活用
  • rgba()による色指定
  • @keyframesによるアニメーション
  • element.checkedでのチェック状態の確認・上書き
  • addEventListener()による関数の実行

など

細かい説明はちょっと書ききれないですが,こういうやり方もあるんだということぐらいは知っておいても良いかなと思います
ほぼHTMLとCSSで実装し,唯一書いたJSがこれ↓だけなので,かなりクリーンなソースになったように思います

function offRadio() {
  var radios = document.querySelectorAll('[name="menu"]');
  for(i=0; i<radios.length; i++){
    radios[i].checked = false;
  }
}

document.getElementById('menu_btn_tgl').addEventListener('click', offRadio);


代わりにCSSが若干長めですが,慣れればこっちのが楽なので,余力があればお試しください
(CSSの力を布教したい)

あ,ちなみにiframeでパーツを分けるデメリットとして,読み込みが少し遅くなる,SEOに弱くなるかも,コードがバラバラになって管理しづらい,iframe内の操作が若干面倒,iframe内のイベントを他の要素に影響させる方法が面倒,などが挙げられます.
いろいろと不自由になりがちなので,ふつうに直接HTMLを記述する方が良いかなと思います

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/04 16:42

    liveAsNotes様

    極力よりよい方法での構築アドバイスありがとうございます!
    私もできればJSを使わず(私の場合はJSの知識が浅いため競合した時に対応力が低いからというものがありますが)、
    CSSのみで構築できたらしたいのですが、どうしてもありもの使ってしまっています^^;
    すごく使いやすそうでカッコいいスタイルのソースの公開をありがとうございます。

    私もiframeは反映されるまでブランクが発生する場合や、SEOの面などからできれば使いたくないのですが、
    運営しているサイトを管理する人が私よりもさらにマークアップの知識がなく、
    いまだになんでもtableで構築しようとしたりfontタグやcenterタグを使ったり、
    Dreamweaverを使っているのになぜかわざわざFFFTPでUPすることを選ぶくらいのスキルの方ばかりの
    部署が運用更新するため、また、サイト運用以外の業務が主なため、
    更新工数は最低限に収めることと、極力難易度低めで更新できるようにするため、iframeにしてみています。

    一部jQueryのloadを使っているところがありますが、
    空divに読み込んだソースが反映されるということもいまいち理解してもらえないので、
    なるべく昔からあるiframeを使用することで更新する人に合わせています。

    こちらのCSSでの手法は、
    次に新規サイトを構築する際にぜひ参考にさせていただきたいと思います。
    こちらのCSSでの構築はスライドしてくるメニュー部分は、iframeやjQueryのloadで運用は可能でしょうか。
    iframeは恐らく不可なのかなとは思いましたが、jQueryのloadでもできれば今後この方法でも構築可能ですので、
    ぜひ参考にさせていただきたいと思います。

    ご親切に丁寧にコードと解説を書いていただき、誠にありがとうございました。
    ご親切心に感謝申し上げます。

    キャンセル

  • 2018/09/04 17:28

    >iframeやjQueryのloadで運用は可能でしょうか。
    iframeでも枠からはみ出そうとしたりしない限り大丈夫かなと思います
    基本的にメニュー部分に関していえば,ul要素の兄にlabelとinputがあるだけの構造なので,loadでもなんでも来いです
    (若干工夫は必要かもしれませんが笑)

    それにしても,人間向けのレガシー対応があるとは思ってもいませんでした
    世界は広い...

    キャンセル

  • 2018/09/04 17:40

    >iframeでも枠からはみ出そうとしたりしない限り大丈夫かなと思います
    そういえば,iframe内からのリンクって親に効かないんだっけ...前言撤回します(><)
    (直接DOMに追記するなら大丈夫なはず)

    キャンセル

  • 2018/09/13 22:01

    リアクションが遅くなり申し訳ございません。
    いろいろとありがとうございました。
    ご解説いただいたことは今後の参考にさせていただきます。
    ご助言いただきましたことを感謝申し上げます。

    キャンセル

0

まさかとは思いますが,添付のコードをそのまま,HTMLとして保存してはいませんよね?
そうであるならコードを修正し,そうでないなら以下のように質問文を修正してください
イメージ説明

また,下記ページを参照してください
https://teratail.com/help/question-tips#questionTips3-7



それから,現時点で示されたコードで確認できるのは以下の通りです
(htmlはいくらか追記しています)
(ボタンを押しても反応しません)
イメージ説明

既にサーバーを借りているなら,そのサーバー上にデモページを設置するか,各種オンラインエディタから公開URLを引っ張ってくるかして,即座にデバッグ作業が行える状態にしてください

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/02 18:58

    liveAsNotes様

    コメントくださり大変ありがとうございます。

    大変失礼いたしました。
    不慣れでお手数をおかけいたしました。
    teratailでの記述方法をご丁寧にお教えいただいきありがとうございます。

    また、返信が遅くなり申し訳ありません。
    再現できるように、ファイルを公開用に編集し、公開用サーバーを作りそこにアップしてみました。

    こちらに現状と同等のものを再現いたしました。
    http://saigentest.ojaru.jp/

    また、前述のhttps://teratail.com/questions/68466 のように#menuの中に閉じるボタンを設置してみたものは
    http://saigentest.ojaru.jp/index2.html にアップいたしました。
    広告が出ていますが、スライドしてきたメニューの中の<a href="#my-page">Close the menu</a>が該当の箇所です。

    もし、なにかご存知でしたら、ご助言いただけると大変幸いでございます。

    キャンセル

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

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

関連した質問

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