ドロワーメニュー YouTube動画をドロワーメニューに表示する方法【HTML/CSS/JavaScript・サンプルコード付き】
YouTube動画をドロワーメニューに表示する方法 YouTube動画をドロワーメニューに表示する方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、「動画を表示」ボタンをクリックすると画面左側からドロワー...
ゆきのふ
ドロワーメニュー 
ドロワーメニュー PDFをドロワーメニューに表示する方法【HTML/CSS/JavaScript・サンプルコード付き】
PDFをドロワーメニューに表示する方法 PDFをドロワーメニューに表示する方法を紹介します。このサンプルでは、「PDFを表示」ボタンをクリックすると画面左側からドロワーメニューが開き、その中にPDFを表示します。PDFはiframeを使用し...
ドロワーメニュー iframeをドロワーメニューに表示する方法【HTML/CSS/JavaScript・サンプルコード付き】
iframeをドロワーメニューに表示する方法 iframeをドロワーメニューに表示する方法を紹介します。このサンプルでは、ボタンをクリックすると画面左側からドロワーメニューが表示され、その中にiframeを使って指定したWebページを表示し...
ドロワーメニュー Googleマップをドロワーメニューに表示する方法【HTML/CSS/JavaScript・サンプルコード付き】
Googleマップをドロワーメニューに表示する方法 Googleマップをドロワーメニューに表示する方法を紹介します。このサンプルでは、「地図を表示」ボタンをクリックすると画面左側からドロワーメニューが開き、その中にGoogleマップを表示し...
ドロワーメニュー ESCキーで閉じられるドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】
ESCキーで閉じられるドロワーメニューの作り方 ESCキーで閉じられるドロワーメニューを作る方法を紹介します。このサンプルでは、画面左側から表示されるドロワーメニューをJavaScriptで制御し、キーボードのESCキーを押すだけで閉じられ...
ドロワーメニュー ドロワーメニュー内にドロワーメニューを表示する方法【HTML/CSS/JavaScript・サンプルコード付き】
ドロワー内にさらに別のドロワーを開く、入れ子構造の複数ドロワー実装。設定メニューから通知メニューなど、親を開いたまま子を重ねて開くUIをシンプルなHTML・CSS・JSだけで実現します。WordPressのカスタムHTMLブロックにコピペで完結！
ドロワーメニュー ページを移動しても開閉状態を記憶するドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】
ページをリロードしてもドロワーメニューの開閉状態をそのまま保持できるサンプルコード。localStorageとsessionStorageを使い、初回訪問時は自動で開かず、2回目以降は前回の状態を再現します。ページ遷移後も状態を引き継げる実践的なドロワーメニューの作り方です。
ドロワーメニュー ハンバーガーボタンからドロワーメニューを開く方法【HTML/CSS/JavaScript・サンプルコード付き】
上部ナビバーから下方向に展開するドロップダウン型ドロワーメニュー。クリックでメニューを開閉し、ESCキーで閉じられるシンプルな構造。WordPressでも崩れにくく、コピペで即使えるHTML・CSS・JS付きサンプル。
アコーディオン アコーディオン付きドロワーメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
サイドからスライドして現れるドロワーメニュー#08。開くと中に階層メニューが展開し、カテゴリをクリックするとサブ項目がスムーズに開閉します。アクセシブル設計＆コピペでそのまま使える実装コード付き。
ドロワーメニュー 背景を暗く表示するドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】
右から開くドロワーメニュー#07。半透明の背景グラデーションとモダンUI、ESCで閉じる等のアクセシビリティ対応。WordPressにそのまま貼れる実装コード付き。