ドロワーメニュー 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にそのまま貼れる実装コード付き。
ドロワーメニュー フェードイン・フェードアウトで開閉するドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】
クリックで右側からゆっくりスライド表示されるドロワーメニューの実装方法を解説。フェード＋スライドの自然な動きと、下部固定の「閉じる」ボタンを備えたレスポンシブ対応デザインです。HTML・CSS・JavaScriptをコピペで使えるサンプル付き。
ドロワーメニュー ドロワーメニュー表示時に背景をぼかす方法【HTML/CSS/JavaScript・サンプルコード付き】
CSSとJavaScriptで実装する半透明ブラー背景付きドロワーメニューのサンプルコード。右からスライドインし、ESCや背景クリックで閉じる実装を解説。
ドロワーメニュー HTML/CSSだけで複数ドロワーメニューを切り替えて表示する方法【HTML/CSS・サンプルコード付き】
CSSの:targetハックで実装する右ドロワーメニューのサンプルコード。JavaScript不要で軽量、背景レイヤーや閉じる操作も実装可能。初心者にもわかりやすい解説付き。
ドロワーメニュー 複数ドロワーメニューを切り替えて表示する方法【HTML/CSS/JavaScript・サンプルコード付き】
複数ドロワーメニューを切り替えて表示する方法 複数ドロワーメニューを切り替えて表示する方法を紹介します。このサンプルでは、「メニューA」と「メニューB」の2つのドロワーメニューを用意し、ボタンをクリックするだけで表示する内容を切り替えられま...