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

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

ただいまの
回答率

88.77%

フッター固定メニューのサイト内検索とハンバーガーメニューを閉じられる様にする方法を知りたいです。

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 272

1919

score 12

前提・実現したいこと

下のコードにサイト内検索とハンバーガーメニューの画面を閉じる機能を追加したいです。

ここに質問の内容を詳しく書いてください。

ワードプレスで、ブログをやっています。私は知識が全くない素人なのですが、コードを丸
ごとコピーすれば、フッター固定メニューを作成できるというサイトからコードを拝借して、
貼り付けたところ、固定メニューは表示されました。しかし、サイト内検索とハンバーガーメニューを
表示させた後、その画面を閉じる事が出来ない事に気付きました。

このままだと不便なので、ボタンやメニューの枠外をタップ・クリックした時にその画面を
閉じられる様にしたいです。コードのコピー元のサイトを見てみると、きちんと閉じられる
様になっています。この様な質問させていただくのは、大変心苦しいのですが、何が足りないのか、
何をどうすればいいのかご教示いただければ幸いです。以下が、丸ごとコピーして貼り付けたコードです。

エラーメッセージ

該当のソースコード

<?php if(wp_is_mobile()) { ?>

<ul class="footer_menu">
<li><a href="#modal-p01"><span class="dashicons dashicons-menu"></span><br>メニュー</a></li>
<li><a href="■URL1"><span class="dashicons dashicons-email" style="font-size:16px"></span><br>■左から2番目</a></li>
<li><a href="■URL2"><span class="dashicons dashicons-heart" style="font-size:16px"></span><br>■左から3番目</a></li>
<li><a href="■URL3"><span class="dashicons dashicons-star-filled" style="font-size:16px"></span><br>■左から4番目</a></li>
<li><a href="#modal-p05"><span class="dashicons dashicons-search" style="font-size:16px"></span><br>検索</a></li>

</ul>

<?php } else { ?> <?php } ?>

<!--modal-p01の中身-->
<div class="modal-window" id="modal-p01">
<div class="modal-inner">

<ul class="mod">
<li><a href="■メニューURL1">■メニュー1■</a></li>
<li><a href="■メニューURL2">■メニュー2■</a></li>
<li><a href="■メニューURL3">■メニュー3■</a></li>
<li><a href="■メニューURL4">■メニュー4■</a></li>
<li><a href="■メニューURL5">■メニュー5■</a></li>
<li><a href="■メニューURL6">■メニュー6■</a></li>
<li><a href="■メニューURL7">■メニュー7■</a></li>
</ul>

</div>
<a href="#!" class="modal-close">&times;</a> 
</div>

<!--modal-p05の中身-->
<div class="modal-window" id="modal-p05">
<div class="modal-inner">
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url('/'); ?>">
<div>

<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>
</div>
<a href="#!" class="modal-close">&times;</a> 
</div>

PHP

試したこと

ワードプレスのPopup Maker​というプラグインを使って、サイト内検索と
ハンバーガーメニューを閉じられないかを試してみましたが、いきなり閉じる
ボタンが出てきて、メニューと検索画面が表示されませんでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

cssを使用していないのではないでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/06/27 15:31

    わざわざご回答いただき、誠にありがとうございます。CSSも同じサイトから
    丸ごと拝借して、コピーしました。以下がその内容です。
    /*--------------------------------
    モーダルウィンドウ
    ---------------------------------*/

    .modal-window {
    -webkit-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    transform: translate(0, 100%);
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    opacity: 0;
    line-height: 1.3;
    display: none9;
    }
    .modal-window:target {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
    }
    .is-active.modal-window {
    display: block9;
    }
    .modal-window:target {
    display: block9;
    }
    .modal-window .modal-inner {
    position: absolute;
    top: 100px;
    left: 5%;
    z-index: 20;
    padding:5%;
    margin:0 auto;
    width: 80%;
    overflow-x: hidden;
    border-radius: 6px;
    background: #fff;
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    }

    .modal-window .modal-close {
    display: block;
    text-indent: -100px;
    overflow: hidden;
    }
    .modal-window .modal-close:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: #333;
    -moz-opacity: 0.7;
    opacity: 0.7;
    }
    .modal-window .modal-close:after {
    content: '\00d7';
    position: absolute;
    top: 70px;
    right:15%;
    z-index: 20;
    margin:0 auto;
    background: #fff;
    border-radius: 2px;
    padding: 10px 10px;
    text-decoration: none;
    text-indent: 0;
    }

    .modal-window {
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
    }



    /*--------------------------------
    スマホのフッターメニュー
    ---------------------------------*/
    ul.footer_menu {
    margin: 0 auto;
    padding: 12px 0;
    width: 100%;
    overflow: hidden;
    display: table;
    table-layout: fixed;
    text-align: center;
    width: 100%;
    }

    ul.footer_menu li {
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align:middle;
    list-style-type: none;
    font-size: 13px;
    line-height: 15px;
    }

    ul.footer_menu li a i{
    font-size: 24px;
    }

    ul.footer_menu li a {
    border: none;
    display: block;
    color: #fff;
    text-align: center;
    text-decoration: none;
    }

    .footer_menu {
    position: fixed;
    bottom: 0;
    left:0;
    background: #000;
    z-index: 9999999999;
    -moz-opacity: 0.9;
    opacity: 0.9;
    }


    /*--------------------------------
    SNSの部分
    ---------------------------------*/


    .modal-window .modal-inner.sns{
    margin:0 auto;
    text-align:center;
    }
    .modal-inner ul {
    list-style:none;
    }
    .modal-inner li {
    list-style:none;
    float:left;
    width:25%;
    margin:3%;
    }
    .modal-inner li a {
    font-size:150%;
    position:relative;
    display:block;
    padding:10px;
    color:#fff;
    border-radius:6px;
    text-align:center;
    text-decoration: none;
    }
    .modal-inner li a:hover {
    box-shadow:none;
    }


    .share li a {display : block;
    padding : 10px 5px;
    color : #fff;
    font-size : 14px;
    text-decoration : none;
    text-align : center;}
    .share li a:hover {opacity :0.8;
    color : #fff;}
    .share li a:visited{ color: #fff;}

    .tweet a{background-color : #55acee;}
    .facebook a{background-color : #315096;}
    .googleplus a{background-color : #dd4b39;}
    .hatena a{background-color : #008fde;}
    .line a{background-color: #00c300;}
    .pocket a{background-color :#f03e51;}
    .rss a {background-color: #ff8c00;}
    .feedly a {background-color: #6cc655;}

    .share-sm {margin:0;}
    .share-sm ul:after {content : "";
    display : block;
    clear : both;}

    /*--------------------------------
    メニューの部分
    ---------------------------------*/

    .mod li{
    float:none;
    display:block;
    width:100%;}

    .mod li a {
    text-align: left; /* メニューを左寄せ */
    font-weight: bold; /* メニューを太字に */
    background: #000; /* メニューの背景色 */
    margin: 2%;
    font-size: 14px; /* メニュー文字サイズ */
    }



    /*--------------------------------
    スマホフッターフロートメニューアイコン
    ---------------------------------*/
    @charset "UTF-8";

    @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.eot?71374117');
    src: url('../font/fontello.eot?71374117#iefix') format('embedded-opentype'),
    url('../font/fontello.woff2?71374117') format('woff2'),
    url('../font/fontello.woff?71374117') format('woff'),
    url('../font/fontello.ttf?71374117') format('truetype'),
    url('../font/fontello.svg?71374117#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
    /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
    /*
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?71374117#fontello') format('svg');
    }
    }
    */

    [class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }

    .icon-th-list:before { content: '\2261'; } /* '≡' */
    .icon-star-empty:before { content: '\2606'; } /* '★' */
    .icon-mail:before { content: '\2709'; } /* '✉' */
    .icon-heart:before { content: '\2764'; } /* '♡' */
    .icon-search:before { content: '♬'; } /* '\1f50d' */

    キャンセル

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

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

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

  • トップ
  • PHPに関する質問
  • フッター固定メニューのサイト内検索とハンバーガーメニューを閉じられる様にする方法を知りたいです。