Dock型ナビゲーションメニューUI

note

macOSなどで見られるDock型のナビゲーションメニューUIをウェブ上で再現しました。マウスホバーで各メニュー要素が拡大し、ツールチップでメニュー名が表示されます。（モバイルデバイスではタップで動作します）

横に並んだメニューアイテムに対して、ホバーアクションでscaleプロパティを使って拡大する動きを加えますが、拡大時にはレイアウトに影響しないため、隣接する要素と重なってしまいます。そのため、拡大した分だけインライン方向のマージンを増やし、等間隔のレイアウトを維持します。アイコン要素は反転させたものを複製して直下に配置し、mask-imageプロパティでグラデーションマスクを適用することで、鏡面反射のような見た目を再現しています。

また、隣接するメニュー要素は位置に応じて拡大率や時間変化に差をつけることで、アニメーションが滑らかに見えるようにすることもポイントです。

ナビゲーションメニューの項目数が多い場合、シンプルなデザインのDock型UIを採用することで、アプリケーションのUIデザインを損ねずに操作性を向上させることが期待できます。通常時にはメニューの存在を意識せずに操作できるデザインですが、ホバー時にはメニュー名の表示とアイコンの拡大により、ナビゲーションメニューとして認識させることができる、機能性の高いUIデザインです。