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

ボタン・メニュー項目・サイズ・色・余白・枠線などを設定して、HTML・CSS・JavaScriptを自動生成できます。

ドロップダウンメニュー作成ツールを使う
新しいタブで開きます

基本

基本のドロップダウンメニューを作る方法
HTML/CSSのみで作るドロップダウンメニューの作り方

開閉

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

アニメーション

スライドイン・スライドアウトするドロップダウンメニューを作る方法
フェードイン・フェードアウトで開閉するドロップダウンメニューの作り方

デザイン

背景をぼかし表示するドロップダウンメニューの作り方
背景を暗く表示するドロップダウンメニューの作り方
立体的なドロップダウンメニューを作る方法
クリックすると枠線を強調するドロップダウンメニューを作る方法

レイアウト

下側へ展開するドロップダウンメニューを作る方法
上側へ展開するドロップダウンメニューを作る方法
左側へ展開するドロップダウンメニューを作る方法
右側へ展開するドロップダウンメニューを作る方法
複数カテゴリーを横並びに表示するドロップダウンメニューを作る方法
横並びのドロップダウンメニューを1つずつ開く方法

初期状態

最初から開いているドロップダウンメニューを作る方法

自動

指定時間後に自動で閉じるドロップダウンメニューの作り方

操作

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

状態維持

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

コンテンツ

Googleマップをドロップダウンメニューに表示する方法
PDFをドロップダウンメニューに表示する方法
iframeをドロップダウンメニューに表示する方法
YouTube動画をドロップダウンメニューに表示する方法
画像付きドロップダウンメニューを作る方法

入れ子

ドロップダウンメニュー内にドロップダウンメニューを表示する方法
ドロップダウンメニューを表示するトグルスイッチを作る方法
3階層まで展開できるドロップダウンメニューを作る方法
固定フッターメニューからドロップダウンメニューを表示する方法

応用

FAQ・Q&A向けドロップダウンメニューの作り方