ドロワーメニュー
コピペですぐ使えるドロワーメニューのサンプルコードを動作・特徴別にまとめています。
無料ツール
ドロワーメニューを自由に作成

表示位置・メニュー項目・サイズ・色・余白・閉じ方などを設定して、HTML・CSS・JavaScriptを自動生成できます。

ドロワーメニュー作成ツールを使う
新しいタブで開きます

基本

基本のドロワーメニューを作る方法
HTML/CSSだけで動くドロワーメニューの作り方

開閉

閉じるボタンで閉じられるドロワーメニューの作り方
外側クリックで閉じられるドロワーメニューの作り方
×ボタンで閉じられるドロワーメニューの作り方
ESCキーで閉じられるドロワーメニューの作り方

表示非表示

HTML/CSSだけで複数ドロワーメニューを切り替えて表示する方法
複数ドロワーメニューを切り替えて表示する方法

アニメーション

フェードイン・フェードアウトで開閉するドロワーメニューの作り方

デザイン

半透明のドロワーメニューを作る方法
背景をぼかして表示するドロワーメニューの作り方
背景を暗く表示するドロワーメニューの作り方
ドロワーメニュー表示中にページ背景をぼかす方法

レイアウト

カテゴリー別に整理したドロワーメニューを作る方法
左右から表示するドロワーメニューを作る方法
画面下から開くドロワーメニューの作り方
画面上から開くドロワーメニューの作り方
画面上から開く横並びドロワーメニューの作り方
画面下から開く横並びドロワーメニューの作り方
画面全体に表示するドロワーメニューの作り方

自動

指定時間後に自動で閉じるドロワーメニューの作り方
設定時間後に自動で開くドロワーメニューを作る方法
スクロール位置で自動で開くドロワーメニューを作る方法
ページ読み込み時にドロワーメニューを自動で開く方法

操作

スワイプ・ドラッグで閉じられるドロワーメニューの作り方

状態維持

ページを移動しても開閉状態を記憶するドロワーメニューの作り方

コンテンツ

画像をドロワーメニューに拡大表示する方法
画像ギャラリーをドロワーメニューで表示する方法
MP4動画プレーヤーをドロワーメニューで表示する方法
MP3音楽プレーヤーをドロワーメニューで表示する方法
YouTube動画をドロワーメニューに表示する方法
PDFをドロワーメニューに表示する方法
iframeをドロワーメニューに表示する方法
Googleマップをドロワーメニューに表示する方法

入れ子

ドロワーメニューを表示するトグルスイッチを作る方法
ドロワーメニュー内にカルーセルを表示する方法
タブ切り替え機能付きドロワーメニューを作る方法
ドロワーメニュー内にドロワーメニューを表示する方法
ハンバーガーボタンからドロワーメニューを開く方法
アコーディオン付きドロワーメニューを作る方法

ナビゲーション

SNSリンク付きドロワーメニューの作り方