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

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

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

基本

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

開閉

閉じるボタンで閉じられるドロワーメニューの作り方
ハンバーガーボタンからドロワーメニューを開く方法

アニメーション

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

デザイン

半透明のドロワーメニューを作る方法
ドロワーメニュー開閉時に背景を暗くしたり・ぼかしたりする方法

レイアウト

ドロワーメニュー開閉時に背景を暗くしたり・ぼかしたりする方法
画面の上下左右から開くドロワーメニューの作り方
画面の上下から開く横並びドロワーメニューの作り方
画面全体に表示するドロワーメニューの作り方

自動

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

操作

スワイプ・ドラッグで閉じられるドロワーメニューの作り方
ドロワーメニューを開いている間、ページのスクロールを禁止する方法

状態維持

ページを移動しても開閉状態を記憶するドロワーメニューの作り方
ドロワーメニューを開いている間、ページのスクロールを禁止する方法

入れ子

タブ切り替え機能付きドロワーメニューを作る方法
ドロワーメニュー内にドロワーメニューを表示する方法
アコーディオン付きドロワーメニューを作る方法