ハンバーガー & サイドメニュー 30選

アイコンをクリックすると枠内でメニューが開閉します。変形アニメーション・開閉演出・マイクロインタラクションをセットで収録。

01. スライドイン + ×変形定番 / 右からスライド
02. 左スライド + 矢印変形3本線 → ←アロー
03. フルスクリーンフェード全面オーバーレイ / 中央寄せ
04. 円形クリップ展開clip-path: circle
05. 上からドロップダウンヘッダー直下に展開
06. 斜めスライドskewX / スポーティ
07. カーテンパネル4枚が時間差で降りる
08. グラスモーフィズムbackdrop-filter: blur

ページ本体

メニューを開くと本体が奥へ縮み、メニューが手前のレイヤーに現れます。アプリ風のプッシュ演出。

09. 本体プッシュバックページが奥へ縮む
10. ネオンサイバー発光 + グリッチ表示
11. パステルポップ丸ボタン + アイコンピル
12. 225°回転で×気持ちいいオーバー回転
13. 3ドット展開ドット → × / チップが降る
14. ボトムシートモバイルUI / 下から
15. 左右交互フライイン奇数は左 / 偶数は右から
16. タイポばらけ演出1文字ずつ立ち上がる
17. ミニマル白2本細線 / 余白重視
18. 縦書き和風writing-mode: vertical-rl
19. スプリングバウンスcubic-bezier オーバーシュート
20. レイヤードスライド2枚の背景が時間差で追従

アイコンレール

細いバーが常設で、クリックすると広がってラベルがスライド表示。ダッシュボード系LPに。

21. アイコンレール展開常設ミニバー / ラベルがスライド出現
22. 全画面タイルグリッドパステルタイルが時間差ポップイン
23. プロフィール付きパネルアバター + ステータスドット
24. アコーディオン入れ子サブメニューが高さアニメで展開
丸ボタンから放射展開右下のFABをクリック
home design_services sell mail
25. 円形放射FAB扇状にアイコンが飛び出す
26. スプリットスライド色面 + メニューが両側から時間差
27. エディトリアル番号大番号がホバーでライムに
28. limebill風フローティング黒パネル + ライムのアクティブピル
29. カード飛び込み影付きカードが下から順にバウンス
ボトムナビ + シート下の「メニュー」をタップ
30. ボトムナビ + シートモバイル風 / シートがバウンス展開