Compass Subnav Marker
メニューの矢印が小さな方位記号へ変わり、見ているセクションを明確に示す。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：用途: navigation
70 items条件に一致する公開素材
Dot Matrix Baseline
リンクの文字下にドットが左右へ順番に現れ、読みやすさを保ちながら選択状態を伝える。
Dotted Leader Directory
目次の項目とページ番号の間にドットリーダーが延び、見ている行を読み取りやすくする。
Axis Rail Menu
縦の座標軸に沿って短い横線がスライドし、選択中メニューを正確に指し示す。
Typographic Side Index
記事リンクにホバーすると、大きな番号が横から滑り込み、見出しの区切り線が伸びる。
Crosshair Navigation Mark
メニュー項目の四隅から短いクロスヘア線が入り、現在注目している項目を示す。
Woven Category Link
カテゴリーリンクの2本の斜線が織り込むように交差し、タグのアクセント模様になる。
Plus to Four Points
展開ボタンのプラス記号がホバーで4つの点へ分かれ、メニューの開閉を視覚的に示す。
Nav Overline Connector
企業サイトのナビゲーションで、ホバーした項目の上側ラインと矢印が連動して現れる。
Icon Compass Focus
コンパス型SVGの外周目盛りがホバーで回転し、中央矢印だけが方向を示すアイコンリンク。
Twin Arrow Exchange
ボタンの前後に置いた2本の矢印が入れ替わり、次のページへ進む動きを視覚的に伝える。
Ghost Title Navigation
ナビゲーションの背後に大きな英語ラベルが淡く浮かび、見出しを視覚的に誘導する。
Menu Thumbnail Cue
ナビゲーション項目にホバーすると、その横へ小さな作品サムネイルが現れ、行き先を予告する。
Index-Led Menu
ナビゲーションの番号が横へ移動し、リンクの下線が引き込まれるヘッダー用演出。
Segmented Nav Ribbon
横並びのナビゲーションで選択項目だけに短い帯が伸びるタブ風ホバー。
Two-Line Label Swap
リンク文字が上へ抜け、次の行に補助メッセージが入れ替わる文字ホバー。
Search Suggestion Lens
検索入力中に候補を見やすく開く、検索インターフェースの軽量UI。
Keyboard Skip Link
キーボードのTab操作で現れる本文スキップリンク。ヘッダーを飛ばしてコンテンツへ移動。