Animated Menu Examples

Smooth transitions and effects to enhance user experience

Hover Underline

.hover-menu a {
  position: relative;
}

.hover-menu a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary-600);
  transition: width 0.3s ease;
}

.hover-menu a:hover::after,
.hover-menu .active a::after {
  width: 100%;
}

Smooth Dropdown

.smooth-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.has-dropdown:hover .smooth-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

Scale Effect

.scale-menu a {
  transition: transform 0.2s ease;
}

.scale-menu a:hover {
  transform: scale(1.1);
}

.scale-menu .active a {
  transform: scale(1.05);
  color: var(--color-primary-600);
}