Marquee menu
Big menu rows: under the pointer a band slides in from the edge it entered by, carrying a running marquee of the item's name and picture.
- enhancer
- menu
- navigation
- marquee
- hover
- images
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Marquee menu example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<nav data-motion="marquee-menu" aria-label="Places">
<a href="#" data-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='110' viewBox='0 0 240 110'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%231d1033'/%3E%3Cstop offset='1' stop-color='%23f08a4b'/%3E%3C/linearGradient%3E%3Crect width='240' height='110' fill='url(%23s)'/%3E%3Ccircle cx='82' cy='30' r='9' fill='%23ffd27a'/%3E%3Cpath d='M0 58 Q30 67 60 58 T120 61 T180 56 T240 58 V110 H0Z' fill='%237a3b52'/%3E%3Cpath d='M0 72 Q30 83 60 63 T120 72 T180 65 T240 72 V110 H0Z' fill='%234a2440'/%3E%3Cpath d='M0 88 Q30 79 60 84 T120 90 T180 82 T240 88 V110 H0Z' fill='%2324132b'/%3E%3C/svg%3E">Dunes</a>
<a href="#" data-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='110' viewBox='0 0 240 110'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%230b2340'/%3E%3Cstop offset='1' stop-color='%235fa8d3'/%3E%3C/linearGradient%3E%3Crect width='240' height='110' fill='url(%23s)'/%3E%3Ccircle cx='130' cy='29' r='10' fill='%23f4f1de'/%3E%3Cpath d='M0 56 Q30 46 60 49 T120 52 T180 50 T240 56 V110 H0Z' fill='%232f5d7c'/%3E%3Cpath d='M0 73 Q30 66 60 66 T120 70 T180 67 T240 73 V110 H0Z' fill='%231d3f5a'/%3E%3Cpath d='M0 91 Q30 98 60 86 T120 90 T180 86 T240 91 V110 H0Z' fill='%230f2638'/%3E%3C/svg%3E">Harbor</a>
<a href="#" data-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='110' viewBox='0 0 240 110'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%230f2b1d'/%3E%3Cstop offset='1' stop-color='%237fb685'/%3E%3C/linearGradient%3E%3Crect width='240' height='110' fill='url(%23s)'/%3E%3Ccircle cx='150' cy='35' r='8' fill='%23f2e8cf'/%3E%3Cpath d='M0 60 Q30 53 60 59 T120 62 T180 59 T240 60 V110 H0Z' fill='%233a6b47'/%3E%3Cpath d='M0 75 Q30 65 60 71 T120 78 T180 66 T240 75 V110 H0Z' fill='%2324492f'/%3E%3Cpath d='M0 88 Q30 80 60 82 T120 88 T180 86 T240 88 V110 H0Z' fill='%23132a1b'/%3E%3C/svg%3E">Forest</a>
<a href="#" data-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='110' viewBox='0 0 240 110'%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop stop-color='%2310141f'/%3E%3Cstop offset='1' stop-color='%233c4f76'/%3E%3C/linearGradient%3E%3Crect width='240' height='110' fill='url(%23s)'/%3E%3Ccircle cx='87' cy='30' r='8' fill='%23e6e9f2'/%3E%3Cpath d='M0 56 Q30 62 60 55 T120 54 T180 55 T240 56 V110 H0Z' fill='%232a3550'/%3E%3Cpath d='M0 75 Q30 69 60 74 T120 77 T180 71 T240 75 V110 H0Z' fill='%231b2338'/%3E%3Cpath d='M0 89 Q30 78 60 88 T120 88 T180 82 T240 89 V110 H0Z' fill='%230d111c'/%3E%3C/svg%3E">Peaks</a>
</nav>import { MarqueeMenu } from "./motion/react/MarqueeMenu";
<MarqueeMenu>Your content</MarqueeMenu><script setup lang="ts">
import MarqueeMenu from "./motion/vue/MarqueeMenu.vue";
</script>
<template>
<MarqueeMenu>Your content</MarqueeMenu>
</template>const el = document.querySelector("#title");
el.dataset.motion = "marquee-menu";The wrappers: MarqueeMenu.tsx (React, TypeScript) and MarqueeMenu.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-speed | 14 | seconds for the marquee to run once round |
data-motion-repeat | 4 | how many name and picture pairs make one run |
Accessibility
- Every row is an ordinary link inside the nav landmark and reads as its name once; the band, its repeated words and pictures are hidden from screen readers. - Keyboard focus brings the band in from below, so the focused row is as clear as a hovered one. - The marquee runs only while a row is hovered or focused, stops off screen and in hidden tabs, and stays still under reduced motion, where the band appears with no slide. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.
Size
marquee-menu.js is 1.3 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.