パーツ番号 03-01-08 ・ CSSのみ

サイドドットナビ

縦並びのドットにホバーするとラベルがスライド表示され、アクティブなドットは縦長に変形します。WordPressの1ページ完結型LPのセクション移動に便利です。

hovercss

プレビュー

ソースコード

HTML

<nav class="d03-01-08-dots">
          <a href="#" onclick="return false" class="active"><i></i><b>ホーム</b></a>
          <a href="#" onclick="return false"><i></i><b>サービス</b></a>
          <a href="#" onclick="return false"><i></i><b>実績</b></a>
          <a href="#" onclick="return false"><i></i><b>会社概要</b></a>
          <a href="#" onclick="return false"><i></i><b>お問い合わせ</b></a>
        </nav>

CSS

.d03-01-08-dots{display:flex;flex-direction:column;gap:18px;align-items:flex-end}
        .d03-01-08-dots a{
          display:flex;align-items:center;flex-direction:row-reverse;gap:10px;
          text-decoration:none;
        }
        .d03-01-08-dots i{
          display:block;width:10px;height:10px;border-radius:999px;
          background:#cbd5e1;flex:none;
          transition:background .3s ease,height .3s ease,transform .3s ease;
        }
        .d03-01-08-dots a:hover i{background:#64748b;transform:scale(1.25)}
        .d03-01-08-dots a.active i{background:#2563eb;height:26px;transform:none}
        .d03-01-08-dots b{
          font-size:12px;font-weight:600;color:#334155;
          background:#f1f5f9;border-radius:6px;padding:4px 10px;
          opacity:0;transform:translateX(8px);pointer-events:none;
          transition:opacity .3s ease,transform .3s ease;
          white-space:nowrap;
        }
        .d03-01-08-dots a:hover b,.d03-01-08-dots a.active b{opacity:1;transform:translateX(0)}
        .d03-01-08-dots a.active b{background:#dbeafe;color:#1d4ed8}

クラス名 .d03-01-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。