Dock de navigation flottant

Aperçu

Un menu de navigation similaire au Dock macOS, avec des icônes qui s’agrandissent progressivement au survol.

Cas d’utilisation et fonctionnalités

Ce dock flottant est idéal si vous souhaitez à la fois un impact visuel et une facilité d’utilisation comme navigation principale de votre application.

Tableaux de bord et applications Web : placement fixe en bas de l’écran, économisant de l’espace et facilitant l’accès aux fonctions clés.
Site Portfolio : des interactions riches donnent aux utilisateurs une impression sophistiquée.
Animation caractéristique : en utilisant la pseudo-classe CSS :has(), une animation d’expansion continue et fluide est obtenue sans utiliser JavaScript.

Points de conception et d’UX

Glassmorphisme : L’application de backdrop-filter: blur() à l’arrière-plan lui donne une texture moderne qui permet de voir à travers le contenu derrière.
Expansion fluide : en spécifiant « transform-origin : bottom center », l’icône s’agrandira naturellement vers le haut à partir du bas.
Coopération des info-bulles : non seulement les icônes s’agrandissent au survol, mais également les info-bulles qui indiquent le rôle de chaque icône flottent, transmettant clairement les noms de fonctions difficiles à transmettre uniquement avec les icônes.
Compatible avec le mode sombre : ajuste automatiquement la couleur et l’ombre d’arrière-plan pour maintenir la visibilité et la beauté dans n’importe quel environnement thématique.

Comment personnaliser

Ajustez les propriétés ci-dessous en fonction des exigences de votre projet.

Modifier le taux d’agrandissement : Vous pouvez ajuster la taille d’agrandissement maximale en modifiant la valeur transform: scale(1.4) de .dock-item:hover.
Taux de grossissement des éléments adjacents : Ajustez la force de l’effet d’entraînement en modifiant scale(1.15) ou scale(1.05) tel que .dock-item:has(+ .dock-item:hover).
Taille du Dock : Vous pouvez personnaliser la taille globale en modifiant la “largeur” / “hauteur” de “.dock-item” et la “hauteur” de “.dock”.

##Code d’implémentation

Copiez le code ci-dessous et utilisez-le dans votre projet.

<div class="dock-wrapper">

<nav class="dock">

  <a href="#" class="dock-item" data-tooltip="Home">

    <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>

  </a>

  <a href="#" class="dock-item" data-tooltip="Messages">

    <svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>

  </a>

  <a href="#" class="dock-item" data-tooltip="Dashboard">

    <svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>

  </a>

  <a href="#" class="dock-item" data-tooltip="Settings">

    <svg viewBox="0 0 24 24"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.06-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.73,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.06,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.43-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.49-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>

  </a>

  <a href="#" class="dock-item" data-tooltip="Profile">

    <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>

  </a>

</nav>

</div>



<style>
.dock-wrapper {

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 200px;

  padding: 40px 20px;

  background-color: #f8fafc;

  overflow: hidden;

  border-radius: 12px;

}



/* Compatible mode sombre */

@media (prefers-color-scheme: dark) {

  .dock-wrapper {

    background-color: #0f172a;

  }

}



.dock {

  display: flex;

  justify-content: center;

  align-items: flex-end;

  padding: 12px;

  background: rgba(255, 255, 255, 0.4);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.7);

  border-radius: 24px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);

  gap: 12px;

  height: 74px;

  position: relative;

}



@media (prefers-color-scheme: dark) {

  .dock {

    background: rgba(30, 41, 59, 0.5);

    border-color: rgba(255, 255, 255, 0.1);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);

  }

}



.dock-item {

  width: 50px;

  height: 50px;

  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);

  border-radius: 14px;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #334155;

  text-decoration: none;

  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);

  position: relative;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 1);

  transform-origin: bottom center;

}



@media (prefers-color-scheme: dark) {

  .dock-item {

    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);

    color: #cbd5e1;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);

  }

}



.dock-item svg {

  width: 24px;

  height: 24px;

  fill: currentColor;

  transition: all 0.25s ease;

}



/* ツールチップ */

.dock-item::before {

  content: attr(data-tooltip);

  position: absolute;

  top: -45px;

  background: rgba(15, 23, 42, 0.9);

  color: white;

  padding: 6px 12px;

  border-radius: 8px;

  font-size: 12px;

  font-weight: 500;

  opacity: 0;

  transform: translateY(10px);

  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);

  pointer-events: none;

  white-space: nowrap;

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);

}



@media (prefers-color-scheme: dark) {

  .dock-item::before {

    background: rgba(255, 255, 255, 0.9);

    color: #0f172a;

  }

}



/* ホバー時の中央要素 */

.dock-item:hover {

  transform: scale(1.4);

  margin: 0 12px;

  z-index: 10;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 1);

}



@media (prefers-color-scheme: dark) {

  .dock-item:hover {

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);

  }

}



.dock-item:hover::before {

  opacity: 1;

  transform: translateY(0);

}



/* 直近の隣接要素（左右） */

.dock-item:has(+ .dock-item:hover),

.dock-item:hover + .dock-item {

  transform: scale(1.15);

  margin: 0 4px;

  z-index: 5;

}



/* 2つ隣の要素（左右） */

.dock-item:has(+ .dock-item + .dock-item:hover),

.dock-item:hover + .dock-item + .dock-item {

  transform: scale(1.05);

  z-index: 1;

}

</style>

État de compatibilité du navigateur

Cet extrait utilise la pseudo-classe CSS :has() pour obtenir une animation fluide.

Chrome/Edge : 105+ (entièrement pris en charge)
Safari : 15,4+ (entièrement pris en charge)
Firefox : 121+ (entièrement pris en charge)

Même dans les environnements de navigateur plus anciens, le comportement de secours consiste à agrandir uniquement l’icône survolée sans provoquer d’erreur.