SnippetUI
← Back to snippets

Navegación de Dock Flotante

Navegación en muelle flotante similar a macOS donde los íconos se expanden cuando se desplazan sobre ellos.

HTMLCSS

Vista previa

Un menú de navegación similar al Dock de macOS, con íconos que se expanden suavemente al pasar el cursor sobre él.

Casos de uso y características

Este muelle flotante es ideal si desea impacto visual y facilidad de uso como navegación principal de su aplicación.

  • Paneles de control y aplicaciones web: ubicación fija en la parte inferior de la pantalla, lo que ahorra espacio y facilita el acceso a funciones clave.

  • Sitio de cartera: las interacciones enriquecidas brindan a los usuarios una impresión sofisticada.

  • Animación característica: Al utilizar la pseudoclase CSS :has(), se logra una animación de expansión continua y fluida sin utilizar JavaScript.

Puntos de diseño y UX

  1. Glassmorphism: Aplicar backdrop-filter: blur() al fondo le da una textura moderna que permite ver el contenido detrás.

  2. Expansión suave: al especificar “origen-transformación: centro inferior”, el ícono se expandirá naturalmente hacia arriba desde la parte inferior.

  3. Cooperación de información sobre herramientas: no solo los íconos se agrandan cuando se desplazan sobre ellos, sino que también flota la información sobre herramientas que indica la función de cada ícono, lo que transmite claramente nombres de funciones que son difíciles de transmitir solo con los íconos.

  4. Compatible con el modo oscuro: ajusta automáticamente el color de fondo y la sombra para mantener la visibilidad y la belleza en cualquier entorno temático.

Cómo personalizar

Ajuste las propiedades siguientes para adaptarlas a los requisitos de su proyecto.

  • Cambiar la tasa de ampliación: puede ajustar el tamaño máximo de ampliación cambiando el valor transform: scale(1.4) de .dock-item:hover.

  • Tasa de ampliación del elemento adyacente: ajuste la fuerza del efecto dominó cambiando scale(1.15) o scale(1.05) como .dock-item:has(+ .dock-item:hover).

  • Tamaño del muelle: Puede personalizar el tamaño general cambiando el ancho/alto de .dock-item y el alto de .dock.

Código de implementación

Copie el código a continuación y úselo en su proyecto.

<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 con el modo oscuro */

@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>

Estado de compatibilidad del navegador

Este fragmento utiliza la pseudoclase CSS :has() para lograr una animación fluida.

  • Chrome/Edge: 105+ (totalmente compatible)

  • Safari: 15.4+ (totalmente compatible)

  • Firefox: 121+ (totalmente compatible)

Incluso en entornos de navegadores más antiguos, el comportamiento alternativo es ampliar solo el ícono sobre el que se encuentra sin causar un error.