Navigation de sections pour guide de musée
Réalisez une navigation de repérage de section dans un contexte de visite de musée : avec contenu réel, contrôles actionnables, retours d’état clairs et disposition adaptative aux différentes tailles d’écran.
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navigation de sections pour guide de musée</title>
<style>
:root { --ink:#3a2419; --paper:#fbf3df; --accent:#c66a2d; --secondary:#b5c88d; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"DIN Alternate","Arial Narrow",sans-serif; background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 18px),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.mast{display:flex;justify-content:space-between;border-bottom:6px solid var(--ink);padding-bottom:18px;gap:20px;align-items:flex-end;margin:0 0 22px}.page{width:min(1240px,calc(100% - 28px));margin:auto;padding:34px 0 70px}.scenario{padding:8px 12px;border:2px solid var(--ink);font:900 12px/1 ui-monospace,monospace}.mast h1{font-family:"DIN Condensed","Arial Narrow",sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(44px,10vw,104px);letter-spacing:-.02em;max-width:1000px;margin:0;line-height:.82}.intro{max-width:720px;font-family:"Arial Narrow",sans-serif;line-height:1.5}.eyebrow{display:inline-block;padding:6px 9px;color:var(--paper);background:var(--accent);font:900 10px/1 ui-monospace,monospace;letter-spacing:.12em}.demo{border-radius:3px;box-shadow:10px 10px 0 var(--accent);position:relative;min-height:400px;overflow:hidden;padding:32px;background:var(--paper)}@media(max-width:700px){.mast{display:grid;grid-template-columns:1fr}.page{width:calc(100% - 16px);padding-top:16px}.demo{padding:14px}}
.panel{padding:20px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:18px;background:color-mix(in srgb,var(--paper) 88%,transparent);box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent) 7%,transparent)}.stack{display:grid;gap:16px}.row{display:flex;flex-wrap:wrap;gap:9px}.action{padding:11px 16px;border:1px solid var(--accent);border-radius:6px;color:var(--accent);background:transparent;box-shadow:0 0 14px color-mix(in srgb,var(--accent) 10%,transparent)}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{min-height:24px;color:var(--secondary);text-shadow:0 0 10px currentColor}.metric{font-size:clamp(30px,7vw,64px);font-weight:900;text-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent)}.muted{opacity:.7}.chip{padding:6px 9px;border:1px solid var(--secondary);border-radius:4px}.meter{height:7px;background:color-mix(in srgb,var(--accent) 15%,transparent)}.meter>i{display:block;height:100%;box-shadow:0 0 12px var(--accent);background:var(--accent)}
.composition-studio{display:grid;gap:14px}.studio-ruler{display:flex;justify-content:space-between;padding:0 4px;color:color-mix(in srgb,var(--ink) 55%,transparent);font:700 11px/1 ui-monospace,monospace;letter-spacing:.14em}.studio-ruler::before{content:"01 / WORKING PROTOTYPE"}.studio-ruler::after{content:"360 · 768 · 1440"}.composition-studio .demo::after{content:"";position:absolute;right:18px;bottom:18px;width:24px;height:24px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);pointer-events:none}
.section-spy{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px}.section-spy nav{display:grid;align-content:start;gap:6px;padding:14px;border-left:3px solid var(--line)}.section-spy nav a{padding:11px;color:inherit;text-decoration:none}.section-spy nav a[aria-current="location"]{border-radius:9px;color:var(--paper);background:var(--accent)}#spyScroller{height:390px;overflow:auto;scroll-behavior:smooth;scroll-snap-type:y proximity;border:1px solid var(--line);border-radius:18px}#spyScroller section{display:grid;min-height:360px;align-content:center;padding:clamp(24px,6vw,64px);scroll-snap-align:start;border-bottom:1px solid var(--line)}@media(max-width:650px){.section-spy{grid-template-columns:1fr}.section-spy nav{grid-auto-flow:column;overflow:auto;border-left:0;border-bottom:3px solid var(--line)}.section-spy nav a{white-space:nowrap}}.workflow-dispatch{display:grid;grid-template-columns:minmax(210px,.48fr) minmax(0,1.52fr);gap:18px}.dispatch-console{display:grid;align-content:start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.dispatch-console h2{margin:.2em 0}.dispatch-console form,.dispatch-console label{display:grid;gap:7px}.dispatch-console input,.dispatch-console select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.dispatch-console fieldset{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px}.dispatch-console fieldset label{display:flex;align-items:center}.dispatch-workbench{--dispatch-load:.22;min-width:0;padding:14px;border-left:8px solid color-mix(in srgb,var(--accent) calc(var(--dispatch-load)*100%),var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%)}.dispatch-workbench[data-dispatch-priority="urgent"]{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:900px){.workflow-dispatch{grid-template-columns:1fr}.dispatch-console{order:2}}
</style>
</head>
<body data-aesthetic="industrial" data-composition="studio">
<main class="page">
<header class="mast"><div><span class="eyebrow">industrial / navigation par repères de section / INTERMEDIATE</span><h1>Navigation de sections pour guide de musée</h1><p class="intro">Réalisez une navigation de repérage de section dans un contexte de visite de musée : avec contenu réel, contrôles actionnables, retours d’état clairs et disposition adaptative aux différentes tailles d’écran.</p></div><span class="scenario">Guide du musée</span></header>
<div class="composition-studio"><div class="studio-ruler" aria-hidden="true"></div><section class="demo" aria-label="Zone interactive de navigation de la section du guide du musée"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Guide du musée DISPATCH</span><h2>Poste de contrôle de l’itinéraire de visite</h2><form id="workflowDispatchForm"><label>Type de tâche<select id="workflowDispatchKind"><option>Salle d’exposition permanente</option><option>Salle d’exposition thématique</option><option>Salle d’exposition familiale</option></select></label><label>Temps de séjour<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="39"><span>minutes</span></label><fieldset><legend>Priorité de traitement</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Standard</label><label><input type="radio" name="workflowPriority" value="urgent">Urgent</label></fieldset><button class="action primary" type="submit">Commencer la visite</button></form><label>Tâche en cours<select id="workflowDispatchActive" aria-label="Basculer la tâche en cours"><option value="1">Salle d’exposition permanente</option><option value="2">Salle d’exposition thématique</option></select></label><output id="workflowDispatchSummary">En attente de planification</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:navigation-menus-section-spy --><div class="section-spy"><nav aria-label="Chapitre de l’article"><a href="#spySection0" aria-current="location">01 carnet de visite du musée</a><a href="#spySection1" data-core-bridge="navigation-menus-section-spy">02 collaboration pour la visite du musée</a><a href="#spySection2">03 Progression de la visite du musée</a><a href="#spySection3">04 Rappel du guide du musée</a></nav><article id="spyScroller" tabindex="0" aria-label="Section défilable"><section id="spySection0" tabindex="-1"><span class="eyebrow">SECTION 1</span><h2>Journal de visite du musée</h2><p>Voici une zone de contenu complète servant à démontrer le positionnement par section. Cliquer sur le sommaire à gauche permet un positionnement fluide et synchronise la position actuelle.</p><p>Les utilisateurs au clavier peuvent également mettre au point la zone défilante pour continuer la lecture.</p></section><section id="spySection1" tabindex="-1"><span class="eyebrow">SECTION 2</span><h2>Collaboration pour la visite du musée</h2><p>Voici une zone de contenu complète servant à démontrer le positionnement par section. Cliquer sur le sommaire à gauche permet un positionnement fluide et synchronise la position actuelle.</p><p>Les utilisateurs au clavier peuvent également mettre au point la zone défilante pour continuer la lecture.</p></section><section id="spySection2" tabindex="-1"><span class="eyebrow">SECTION 3</span><h2>Progression de la visite du musée</h2><p>Voici une zone de contenu complète servant à démontrer le positionnement par section. Cliquer sur le sommaire à gauche permet un positionnement fluide et synchronise la position actuelle.</p><p>Les utilisateurs au clavier peuvent également mettre au point la zone défilante pour continuer la lecture.</p></section><section id="spySection3" tabindex="-1"><span class="eyebrow">SECTION 4</span><h2>Rappel du guide du musée</h2><p>Voici une zone de contenu complète servant à démontrer le positionnement par section. Cliquer sur le sommaire à gauche permet un positionnement fluide et synchronise la position actuelle.</p><p>Les utilisateurs au clavier peuvent également mettre au point la zone défilante pour continuer la lecture.</p></section></article></div><!-- 11DZ_CORE_END --></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:navigation-menus-section-spy */
const spyLinks=[...document.querySelectorAll('.section-spy nav a')];spyLinks.forEach(link=>link.addEventListener('click',event=>{event.preventDefault();spyLinks.forEach(item=>item.removeAttribute('aria-current'));link.setAttribute('aria-current','location');const section=document.querySelector(link.getAttribute('href'));section.scrollIntoView({behavior:matchMedia('(prefers-reduced-motion:reduce)').matches?'auto':'smooth',block:'start'});section.focus({preventScroll:true});announce('Localisé '+link.textContent.trim());}));
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"navigation-menus-section-spy","selector":"[data-core-bridge=\"navigation-menus-section-spy\"]","mode":"click","key":"Enter"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Version de base '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("click",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowDispatchCore=document.querySelector('#workflowCore');const workflowDispatchForm=document.querySelector('#workflowDispatchForm');const workflowDispatchSelect=document.querySelector('#workflowDispatchActive');const workflowDispatchJobs=new Map([["1",{"label":"Salle d’exposition permanente","amount":12,"priority":"normal","touches":0}],["2",{"label":"Salle d’exposition thématique","amount":21,"priority":"urgent","touches":0}]]);let workflowDispatchSerial=workflowDispatchJobs.size;function workflowDispatchDrive(job,activate=false){workflowDispatchCore.dataset.dispatchPriority=job.priority;workflowDispatchCore.style.setProperty('--dispatch-load',Math.min(.95,.16+job.amount/120));const bridge=activate?workflowBridgeActivate():{changed:false,summary:workflowBridgeSummary()};document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' minutes · '+bridge.summary;announce('Tâche en cours sur l’itinéraire de visite :'+job.label);}function workflowDispatchRender(activeId,activate=false){workflowDispatchSelect.replaceChildren(...[...workflowDispatchJobs].map(([id,job])=>{const option=document.createElement('option');option.value=id;option.textContent=job.label+(job.priority==='urgent'?' · Urgent':'');return option;}));workflowDispatchSelect.value=activeId;workflowDispatchDrive(workflowDispatchJobs.get(activeId),activate);}workflowDispatchForm.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(workflowDispatchForm);const id=String(++workflowDispatchSerial);workflowDispatchJobs.set(id,{label:document.querySelector('#workflowDispatchKind').value,amount:Math.max(1,Number(document.querySelector('#workflowDispatchAmount').value)||1),priority:data.get('workflowPriority'),touches:0});workflowDispatchRender(id,true);});workflowDispatchSelect.addEventListener('change',()=>workflowDispatchDrive(workflowDispatchJobs.get(workflowDispatchSelect.value),true));workflowDispatchCore.addEventListener('focusin',()=>{const job=workflowDispatchJobs.get(workflowDispatchSelect.value);if(!job)return;job.touches+=1;document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' minutes · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
</script>
</body>
</html>