SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:Beispiel Menue mit popover.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang='de'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- <link rel='stylesheet' type='text/css' media='screen' href='./Beispiel:SELFHTML-Beispiel-Grundlayout.css'> -->
<!-- <link rel='stylesheet' type='text/css' media='screen' href='https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SELFHTML-Beispiel-Grundlayout.css'> -->
<title>Beispiel: Seitennavigation mit popover</title>
<style>
/* menu.css */
body {
margin: 0em; padding: 0;
--bodyTop: 2em;
margin-top: var(--bodyTop);
}
main {
padding: .5em;
}
/* Position der Navigation */
#sitenav {
position: absolute;
top: 1em;
left: 2em;
button {
font-size: 1em;
margin: .2em;
line-height: 1.2;
&:first-child {
border: none;
padding:0;
&:hover { font-weight: bold;}
}
}
a {
text-decoration: none;
margin: .2em;
line-height: 1.6;
&:hover { font-weight: bold; }
}
li {
list-style: none;
}
/* Farben */
*, a {
background-color: lightgray;
color: black;
}
/* Sprachicon */
.langselect img {
height: 1.5em;
}
*:focus {
font-weight: bold;
}
[popover] {
position-anchor: auto;
top: anchor(bottom);
left: anchor(left);
margin: 0;
border: none;
& [popover] {
top: calc(anchor(bottom) - 1.8em);
left: anchor(right);
}
}
@media (min-width: 55em) {
top: 0;
left: 0;
z-index: 10;
li, button {
min-width: 7em;
text-align: center;
}
& > [popover] {
/*position: absolute;*/
display: flex;
padding-left: 5em;
left: 0;
top: 0;
width: 100vw;
& [popover] {
top: anchor(bottom);
left: anchor(left);
& [popover] {
top: calc(anchor(bottom) - 1.8em);
left: anchor(right);
}
}
}
}
}
/* Skip-Link */
#skip-link {
position: absolute;
left: 0; top: 0em;
background: black;
color: white;
padding: 0.25em;
transform: translateY(-100%);
transition: 0.2s transform;
z-index: 1001;
&:focus {
transform: translateY(0);
}
}
/* Für AT */
.visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px) !important;
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden !important;
white-space: nowrap !important;
}
/* Ende menu.css */
</style>
<script type="module">
// Polyfill für anchor()
if (!("anchorName" in document.documentElement.style)) {
console.log('Polyfill laden');
// const { default: polyfill } = await import("https://unpkg.com/@oddbird/css-anchor-positioning");
const { default: polyfill } = await import("https://unpkg.com/@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js");
polyfill(true);
console.log(polyfill);
}
</script>
<script>
// menu.js
'use strict';
// Ende menu.js
</script>
</head>
<body>
<a id='skip-link' href='#main'>zum Hauptinhalt</a>
<nav id='sitenav' aria-labelledby='sitenav-label'>
<h2 id='sitenav-label' class='visually-hidden'>Site-Navigation</h2>
<button id="level1-toggle" popovertarget="level1" popovertargetaction="toggle">Menü</button>
<ul id="level1" popover anchor="level1-toggle">
<li><a href='/'>Startseite</a></li>
<li>
<button id="level11-toggle" popovertarget="level11" popovertargetaction="toggle">Bereich 1</button>
<ul id="level11" popover anchor="level11-toggle">
<li><a href=''>Seite 1.1</a></li>
<li><a href=''>Seite 1.2</a></li>
<li><a href=''>Seite 1.3</a></li>
</ul>
</li>
<li aria-current='page'>
<button id="level12-toggle" popovertarget="level12" popovertargetaction="toggle">Bereich 2</button>
<ul id="level12" popover anchor="level12-toggle">
<li><a href=''>Seite 2.1</a></li>
<li><a href=''>Seite 2.2</a></li>
<li><a href=''>Seite 2.3</a></li>
<li aria-current='page'>
<button id="level24-toggle" popovertarget="level24" popovertargetaction="toggle">Bereich 2.4</button>
<ul id="level24" popover anchor="level24-toggle">
<li><a href=''>Seite 2.4.1</a></li>
<li><a href=''>Seite 2.4.2</a></li>
<li aria-current='page'><a tabindex=0>aktuelle Seite</a></li>
<li><a href=''>Seite 2.4.4</a></li>
</ul>
</li>
<li>
<button id="level25-toggle" popovertarget="level25" popovertargetaction="toggle">Bereich 2.5</button>
<ul id="level25" popover anchor="level25-toggle">
<li><a href=''>Seite 2.5.1</a></li>
<li><a href=''>Seite 2.5.2</a></li>
<li><a href=''>Seite 2.5.3</a></li>
</ul>
</li>
<li><a href=''>Seite 2.6</a></li>
</ul>
</li>
<li><a href=''>Seite 3</a></li>
<li><a href=''>Seite 4</a></li>
<li><a href=''>Impressum</a></li>
<li class='langselect'>
<button id="langselect-toggle" popovertarget="langselect" popovertargetaction="toggle"><img src='https://wiki.selfhtml.org/images/8/87/Language-Icon.svg' alt='Sprachwahl, Language selection, Sélection de la langue, Selección de idioma'></button>
<ul id="langselect" popover anchor="langselect-toggle">
<li><a href=''>Deutsch</a></li>
<li><a href=''>English</a></li>
<li><a href=''>Francais</a></li>
<li><a href=''>Español</a></li>
</ul>
</li>
</ul>
</nav>
<main id='main'>
<h1>Beispiel: Seitennavigation mit popover</h1>
<p>Funktioniert z.Zt. (April 2025) nur im Chrome (und Edge?)</p>
<section>
<h2>Was?</h2>
<p>Die Navigation soll folgende Eigenschaften haben:</p>
<ul>
<li>Bis zu drei Ebenen.</li>
<li>Auf schmalen Viewports vertikal angeordnet.</li>
<li>Auf genügend breiten Viewports horizontal angeordnet.</li>
<li>Bedienung mit Maus, Touch und Tastatur.</li>
</ul>
</section>
<section>
<h2>Wie?</h2>
<p>Basis der Navigation ist eine verschachtelte Liste. Das Öffnen der erfolgt über einen Button vor den UL und die popover-Technik. Die Positionierung der Untermenüs erfolgt über die anchor-Technik.</p>
<p>Vor die Navigation wird noch ein Skip-Link gesetzt, um Tastatur-Benutzern sowie Besuchern mit assistiven Techniken zu ermöglichen, direkt zum Inhalt zu springen. Per css wird dieser Link aus dem Viewport geschoben und nur bei Focus sichtbar.</p>
<p>Um Besucher mit assistiven Techniken zu informieren, erhält die Navigation noch eine visuell versteckte Überschrift.</p>
<p>Per css wird die Navigationsliste je nach Seitenbreite im Quer- oder Hochformat angeordnet.</p>
<p>Auf schmalen Viewports wird die Navigation hinter einem Menü-Button versteckt. Bei Klick öffnet sich die erste Ebene nach unten und die zweite und dritte nach rechts. Auf genügend breiten Viewports ist der Menü-Button versteckt und die erste Ebene ist immer sichtbar und waagrecht angeordnet. Die zweite Ebene öffnet nach unten, die dritte nach rechts.</p>
<p>In die Navigation wurde auch ein Untermenü für die Sprachwahl eingebaut. Damit das Sprachwahlmenü unabhängig von der Sprache erkannt wird, wurde hier das durch die „Language Icon Initiative” vorgeschlagene Standard-Icon für Sprachwahlmenüs gewählt.</p>
<p>In der Beispieldatei sind HTML, CSS und Javascript für das Menü in einer Datei zusammengefasst. Im Einsatz sollten die Teile in getrennten Dateien untergebracht werden.</p>
</section>
</main>
</body>
</html>
