nicht angemeldet
hallo
Ist mir ein wenig zu abstrakt gehalten, Deine Angabe! seufZ
Es sind zweierlei Dinge die auch ineinander greifen. Zu einen das Sandwich-Menue das sich auftut wenn das Bildschirmfenster eine bestimmte Breite erreicht hat, dann noch die toggle-Submenues, beides sollte geöffnet bleiben wenn das js "ausgeschaltet ist (dies macht eigentlich Gunnars script). Puuuh wie stelle ich dies nun an, bin überfordert, wie gesagt, ein Anfänger.
Mach mal eine neue Seite mit:
<!DOCTYPE html>
<html lang="de">
<head>
<title>undefined</title>
<style>
[aria-expanded="false"] + * { display:none;}
@media screen and (min-width:30em){
nav [aria-expanded]{ display:none }
nav [aria-expanded] + * {display:initial}
}
</style>
</head>
<body>
<h1>Beispiel</h1>
<nav>
<button aria-expanded="">Menu</button>
<section>
<button aria-expanded="">Sub1</button>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
<button aria-expanded="">Sub2</button>
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</section>
</nav>
<script>
function globalClickManager(ev){
// ev.target gibt uns das Element auf dem der Click geschah.
// steuere expanded Buttons
if(ev.target.hasAttribute("aria-expanded") ){
ev.target.setAttribute("aria-expanded", ( ev.target.getAttribute("aria-expanded") == "false") );
}
// Buttons die lediglich den Click transferieren ähnlich zu label Elementen
else if(ev.target.hasAttribute("data-for-id") ){
document.getElementById( ev.target.getAttribute("data-for-id") ).click();
}
}
document.body.addEventListener("click",globalClickManager);
</script>
</body>
</html>
Das ist ein Minimalbeispiel, das nur das Notwendige beinhaltet.
Es ist der Tatsache Rechnung getragen, dass bei breiten Bildschirmen nav Buttons überflüssig sind, aber deren kontrollierte Inhalte agezeigt werden müssen.
Matthias Apsel