Beispiel:Test-popover-verschachtelt anchor.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">
<title>Test verschachtelte Popover mit Anchor positioniert</title>
<style>
[popover] {
top: anchor(top);
left: anchor(right);
margin: 0;
}
#u1_toggle {
anchor-name: --u1_toggle;
}
#u1 {
position-anchor: --u1_toggle;
}
#u11_toggle {
anchor-name: --u11_toggle;
}
#u11 {
position-anchor: --u11_toggle;
}
#u12_toggle {
anchor-name: --u12_toggle;
}
#u12 {
position-anchor: --u12_toggle;
}
</style>
<script type="module">
// Polyfill für anchor: https://github.com/oddbird/css-anchor-positioning?tab=readme-ov-file
if (!("anchorName" in document.documentElement.style)) {
import("https://unpkg.com/@oddbird/css-anchor-positioning");
console.log('Polyfill laden');
}
</script>
</head>
<body>
<h1>Test verschachtelte Popover mit Anchor positioniert<br>(mit Polyfill von oddbird)</h1>
<div>
<button id="u1_toggle" popovertarget="u1" popovertargetaction="toggle">U1</button>
<ul id="u1" popover anchor="u1_toggle">
<li>
<button id="u11_toggle" popovertarget="u11" popovertargetaction="toggle">U11</button>
<ul id="u11" popover anchor="u11_toggle">
<li>U111</li>
<li>U112</li>
</ul>
</li>
<li>
<button id="u12_toggle" popovertarget="u12" popovertargetaction="toggle">U12</button>
<ul id="u12" popover anchor="u12_toggle">
<li>U121</li>
<li>U122</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
