Beispiel:CSS-Anw-Checkbox-Hack-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<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" />
<title>Akkordeonmenü mit Checkbox-Hack</title>
<style>
nav .hackbox {display:none;}
nav>ul { padding:15px !important; border:1p solid darkgrey; border-radius:5px; }
nav ul { list-style-type:none; width:300px; padding-left:0px; }
nav ul ul { max-height:0vh; overflow:hidden; transition:max-height 1s; width:275px; padding-left:25px; }
nav ul ul ul { width:250px; padding-left:25px; }
nav label { display:inline-block; width:20px; margin-right:3px; background-color:lightgrey; border-radius:3px; box-shadow:1px 1px 0px 0px; }
nav ul a { display:inline-block; border-bottom:1px solid grey; padding:3px; width:271px; margin-top:2px; border-radius:3px; background-color:#999; box-shadow:1px 1px 0px 0px; }
nav ul a:hover, nav ul .hackbox:checked ~ a:hover { background-color:#dfac20; }
nav ul ul a { width:246px; background-color:#bbb; }
nav ul ul ul a { width:221px; background-color:#ccc; }
nav ul .hackbox:checked ~ ul { max-height:100vh; }
nav ul .hackbox:checked ~ a { font-weight:bold; }
nav>ul>li>.hackbox:checked~label::before, nav>ul>li>ul>li>.hackbox:checked~label::before { content:"\21D3"; }
nav>ul>li>label::before, nav>ul>li>ul>li>label::before {
content:"\21D2";
position:relative;
left:0.5ex;
}
nav label:hover {
font-weight:900; background-color:#c32e04;
}
</style>
<script>
function hackboxclick(element, strict) {
if (element.checkedBefore) {
element.checked = false;
element.checkedBefore = false;
} else {
element.checkedBefore = true;
}
var ebene = element.name.substr((element.name.lastIndexOf('_')+1));
ebene = Number(ebene);
if (ebene != Number.NaN) {
var namebase = element.name.substr(0, element.name.lastIndexOf('_')+1);
var i = 1;
var nelm = false;
while (nelm = document.getElementById(namebase+(ebene)+'_'+i)) {
if (nelm != element) {
nelm.checkedBefore = false;
}
i++;
}
if (!strict) {
var j = 1;
while (document.getElementsByName(namebase+(ebene+j)).length > 0) {
i = 1;
while (nelm = document.getElementById(namebase+(ebene+j)+'_'+i)) {
hackboxclick(nelm,true);
i++;
}
j++;
}
}
}
}
document.addEventListener("DOMContentLoaded", function() {
var hackboxes = document.querySelectorAll('.hackbox');
for (var i = 0; i < hackboxes.length; i++) {
hackboxes[i].addEventListener("click", function() { hackboxclick(this,false); });
hackboxes[i].checkedBefore = hackboxes[i].checked;
}
});
</script>
</head>
<body>
<h1>Akkordeonmenü mit Checkbox-Hack</h1>
<main>
<nav>
<ul>
<li>
<input type="radio" name="navi_1" id="navi_1_1" class="hackbox" checked><label for="navi_1_1"></label><a>Link Haupt</a>
<ul>
<li>
<input type="radio" name="navi_2" id="navi_2_1" class="hackbox" checked><label for="navi_2_1"></label><a>Link Sub</a>
<ul>
<li>
<input type="radio" name="navi_3" id="navi_3_1" class="hackbox"><label for="navi_3_1"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_2" class="hackbox"><label for="navi_3_2"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_3" class="hackbox"><label for="navi_3_3"></label><a>Link Sub-Sub</a>
</li>
</ul>
</li>
<li>
<input type="radio" name="navi_2" id="navi_2_2" class="hackbox"><label for="navi_2_2"></label><a>Link Sub</a>
<ul>
<li>
<input type="radio" name="navi_3" id="navi_3_4" class="hackbox"><label for="navi_3_4"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_5" class="hackbox"><label for="navi_3_5"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_6" class="hackbox"><label for="navi_3_6"></label><a>Link Sub-Sub</a>
</li>
</ul>
</li>
<li>
<input type="radio" name="navi_2" id="navi_2_3" class="hackbox"><label for="navi_2_3"></label><a>Link Sub</a>
<ul>
<li>
<input type="radio" name="navi_3" id="navi_3_7" class="hackbox"><label for="navi_3_7"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_8" class="hackbox"><label for="navi_3_8"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_9" class="hackbox"><label for="navi_3_9"></label><a>Link Sub-Sub</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="radio" name="navi_1" id="navi_1_2" class="hackbox"><label for="navi_1_2"></label><a>Link Haupt</a>
<ul>
<li>
<input type="radio" name="navi_2" id="navi_2_4" class="hackbox"><label for="navi_2_4"></label><a>Link Sub</a>
<ul>
<li>
<input type="radio" name="navi_3" id="navi_3_10" class="hackbox"><label for="navi_3_10"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_11" class="hackbox"><label for="navi_3_11"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_12" class="hackbox"><label for="navi_3_12"></label><a>Link Sub-Sub</a>
</li>
</ul>
</li>
<li>
<input type="radio" name="navi_2" id="navi_2_5" class="hackbox"><label for="navi_2_5"></label><a>Link Sub</a>
<ul>
<li>
<input type="radio" name="navi_3" id="navi_3_13" class="hackbox"><label for="navi_3_13"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_14" class="hackbox"><label for="navi_3_14"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_15" class="hackbox"><label for="navi_3_15"></label><a>Link Sub-Sub</a>
</li>
</ul>
</li>
<li>
<input type="radio" name="navi_2" id="navi_2_6" class="hackbox"><label for="navi_2_6"></label><a>Link Sub</a>
<ul>
<li>
<input type="radio" name="navi_3" id="navi_3_16" class="hackbox"><label for="navi_3_16"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_17" class="hackbox"><label for="navi_3_17"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_18" class="hackbox"><label for="navi_3_18"></label><a>Link Sub-Sub</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="radio" name="navi_1" id="navi_1_3" class="hackbox"><label for="navi_1_3"></label><a>Link Haupt</a>
<ul>
<li>
<input type="radio" name="navi_2" id="navi_2_7" class="hackbox"><label for="navi_2_7"></label><a>Link Sub</a>
<ul>
<li>
<input type="radio" name="navi_3" id="navi_3_19" class="hackbox"><label for="navi_3_19"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_20" class="hackbox"><label for="navi_3_20"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_21" class="hackbox"><label for="navi_3_21"></label><a>Link Sub-Sub</a>
</li>
</ul>
</li>
<li>
<input type="radio" name="navi_2" id="navi_2_8" class="hackbox"><label for="navi_2_8"></label><a>Link Sub</a>
<ul>
<li>
<input type="radio" name="navi_3" id="navi_3_22" class="hackbox"><label for="navi_3_22"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_23" class="hackbox"><label for="navi_3_23"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_24" class="hackbox"><label for="navi_3_24"></label><a>Link Sub-Sub</a>
</li>
</ul>
</li>
<li>
<input type="radio" name="navi_2" id="navi_2_9" class="hackbox"><label for="navi_2_9"></label><a>Link Sub</a>
<ul>
<li>
<input type="radio" name="navi_3" id="navi_3_25" class="hackbox"><label for="navi_3_25"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_26" class="hackbox"><label for="navi_3_26"></label><a>Link Sub-Sub</a>
</li>
<li>
<input type="radio" name="navi_3" id="navi_3_27" class="hackbox"><label for="navi_3_27"></label><a>Link Sub-Sub</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</main>
</body>
</html>
