ドロワーメニュー ドロワーメニュー内にドロワーメニューを表示する方法【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・サンプルコード付き】
長い入力フォームをステップごとに分割し、タブと次へ/戻るボタンで直感的に進められるUIを実装。コピペで使えるCSS・HTML・JSコード付き。
タブ切り替え スクロールで自動切り替えできるタブを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
スクロールに合わせてタブが自動で切り替わるUIをコピペで実装！ヘッダー内タブ式ナビ＋メガメニュー連動のデモとコード付き解説。
タブ切り替え タブ切り替え内にタブ切り替えを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
外側タブと内側タブの二重構造を持つネストタブの実装サンプル。カテゴリと詳細を切替表示でき、複数階層のUI整理に便利。ARIA対応・コピペで使える完全コード付き。
タブ切り替え タブ内の件数をバッジ表示するタブ切り替えを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
タブ内の要素数を集計してバッジに表示するUIサンプル。未読数やタスク件数などを動的に見せられ、ギャラリーや通知機能に最適。ARIA対応・コピペで使える完全コード付き。