モーダルウィンドウをプラグインなしで実現させる。解決策jQueryスマホのメニューでモーダルウィンドウをプラグインなしで実現させるには?問題スマートフォンのメニューでモーダルウィンドウをプラグインなしで実現させるには?解決策コンテンツ・ナビゲーション表示用ボタン、ナビゲーションの3つのブロックに分け、css、jqueryで操作する。モーダルウィンドウをプラグインなしで実装します。スマートフォンのナビゲーションには、様々なタイプがあります。ハンバーガードロップダウンスライドアイコンその中でもモーダルウィンドウタイプをプラグインなしで実装します。プラグインを使わないことで、プラグインの設定による拘束がなくなる。カスタマイズが自由に行えて、機能や挙動の拡張が容易。3つのブロックに分けます。モーダルウィンドウを実装するために、HTMLのbodyタグ内を3つのブロックに分ける必要があります。メニューボタンナビゲーションコンテンツこれらを「コンテンツ」、「ナビゲーション」、「メニューボタン」の順に、上から重ねて表示させる必要があります。メニューボタンの作成まず、メニューボタンの構築です。HTMLの構築Ulでメニューボタンを構築します。fixed;」に設定します。9999;」を設定します。※メニューボタンの設定に関しては、過去の記事をご覧ください。次に、ナビゲーションの構築です。HTMLの構築id「mdl-nav」と設定した要素で囲い、メニューのリスト「クラス:nav-list」を構築します。none;」に設定します。メニューボタンの次に表示されるように、「z-index」で1~9998の数値を設定します。リストのクラス「nav-list」に、適宜cssを設定します。最後に、コンテンツの構築です。HTMLの構築id「mdl-contents」と設定し、メニューボタンの「menu-list」とナビゲーションの「mdl-nav」の間に設置します。仕上げにjQueryのコード例です。});});メニューアイコンを囲うaタグにクリックイベントを設定します。aタグに「close」クラスの追加⇔取り消しを交互に行うようにします。aタグに「close」クラスを持っていればナビゲーションを表示させ、そうでなければ非表示にさせるようにしています。aタグに「close」クラスを持っていれば、メニューアイコン下のテキストを「CLOSE」に切り替えて、そうでなければ「MENU」に切り替えるようにしています。このサイト自体がモーダルウィンドウを起用しており、ほとんど同じ設定を行っているので、ぜひスマホの実機でご覧ください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。解決策このサイトについて。