Menu en strips de contrôle aérien
Les sections sont des strips de vol dans une tour de contrôle : celui qu'on choisit sort de la rangée, comme chez un contrôleur.
Réglages
Code
<nav class="uvq12-at" aria-label="Tour de contrôle"><p class="hd" aria-hidden="true"><span>Tour de contrôle</span><span>RWY 36L</span></p><ol><li><a href="#" style="--c:#fde68a" aria-current="page"><span class="cs" aria-hidden="true"><b>IBE3141</b><small>A320</small></span><span class="nm">Aperçu</span><span class="rt" aria-hidden="true">MAD LIS</span></a></li><li><a href="#" style="--c:#bfdbfe"><span class="cs" aria-hidden="true"><b>VLG7012</b><small>A321</small></span><span class="nm">Vols</span><span class="rt" aria-hidden="true">BCN ORY</span></a></li><li><a href="#" style="--c:#fecaca"><span class="cs" aria-hidden="true"><b>AEA1024</b><small>B738</small></span><span class="nm">Passagers</span><span class="rt" aria-hidden="true">PMI MAD</span></a></li><li><a href="#" style="--c:#bbf7d0"><span class="cs" aria-hidden="true"><b>RYR4410</b><small>B38M</small></span><span class="nm">Bagages</span><span class="rt" aria-hidden="true">AGP STN</span></a></li><li><a href="#" style="--c:#e9d5ff"><span class="cs" aria-hidden="true"><b>TAP1013</b><small>A20N</small></span><span class="nm">Rapports</span><span class="rt" aria-hidden="true">LIS OPO</span></a></li></ol></nav>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Navigation
Voir tout : NavigationOù l’utiliser
Un menu vertical inspiré des bandes de papier que les contrôleurs aériens rangent dans un râtelier. Chaque section est un strip coloré avec indicatif, type d'avion et route imprimés en chasse fixe, et celui qu'on choisit sort de la rangée avec un repère rouge, comme le contrôleur signale le vol qu'il gère. Les flèches passent d'un strip à l'autre. Pour les tableaux de bord, outils logistiques et espaces d'administration.
La couleur principale règle le repère actif et la secondaire le métal du râtelier. Donne à chaque strip sa couleur de papier dans les données et garde les codes imprimés comme décor à côté d'un nom de section clair.