Motion & Interaction (DOM)

Transitions, transforms, hover effects, and cursor styling via light DOM CSS.

All CSS on this page applies equally to popover mode — the menu renders as the same .alapelem element whether using DOM or popover.

Item Hover Transitions

No transition (default)

coffee

Smooth (0.4s ease)

coffee

/* Instant hover (default) — no transition set */

/* Smooth color + background */
.alap_mo-smooth a {
  transition: background 0.4s ease, color 0.4s ease;
}

Hover Transform: Slide

Items slide right on hover: bridges

.alap_mo-slide {
  overflow: hidden;  /* clip translated item to menu bounds */
}
.alap_mo-slide a {
  transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease;
}
.alap_mo-slide a:hover {
  transform: translateX(6px);
}

Hover Transform: Scale

Items grow slightly on hover: bridges

.alap_mo-scale {
  overflow: hidden;  /* clip scaled item to menu bounds */
}
.alap_mo-scale a {
  transition: transform 0.12s ease;
}
.alap_mo-scale a:hover {
  transform: scale(1.03);
}

Hover Border (Accent Bar)

Left accent appears on hover: bridges

Uses inset box-shadow to avoid layout shift.

.alap_mo-accent a {
  transition: box-shadow 0.1s ease, background 0.4s ease;
}
.alap_mo-accent a:hover {
  box-shadow: inset 3px 0 0 #3b82f6;
}

Cursor

pointer (default)

coffee

default (arrow)

coffee

.alap_mo-pointer a { cursor: pointer; }  /* default */
.alap_mo-arrow a   { cursor: default; }

Reduced Motion

Always wrap transitions in a prefers-reduced-motion media query:

.alap_mo-smooth a,
.alap_mo-slide a,
.alap_mo-scale a {
  transition: background 0.4s ease, color 0.4s ease,
              transform 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .alap_mo-smooth a,
  .alap_mo-slide a,
  .alap_mo-scale a {
    transition: none;
  }
  .alap_mo-slide a:hover,
  .alap_mo-scale a:hover {
    transform: none;
  }
}