Voorbeeld accordion drop down menu
Hieronder is een voorbeeld van een accorion drop down menu. Te samen met de HTML en CSS codes en een link van de iconen in een svg bestand.
Dit is de korte versie van de sitemap pagina.
Iconen
HTML code
<ul id="menu" class="animated">
<li class="item"><a class="label icon-img" href="../"><span>Begin Pagina.</span></a></li>
<li class="item">
<input class="input" type="checkbox" name="groep-1" id="groep-1">
<label class="label icon-folder" for="groep-1"><span>Hoofdstuk.</span></label>
<ul class="sub sub-l1">
<li class="item"><a class="label icon-img" href="#"><span>Artikel 1.</span></a></li>
<li class="item"><a class="label icon-img" href="#"><span>Artikel 2.</span></a></li>
<li class="item"><a class="label icon-img" href="#"><span>Artikel 3.</span></a></li>
<li class="item">
<input class="input" type="checkbox" name="groep-1.1" id="groep-1.1">
<label class="label icon-folder" for="groep-1.1"><span>Paragraaf.</span></label>
<ul class="sub sub-l2">
<li class="item">
<input class="input" type="checkbox" name="groep-1.1.1" id="groep-1.1.1">
<label class="label icon-folder" for="groep-1.1.1"><span>Subparagraaf 1.</span></label>
<ul class="sub sub-l3">
<li class="item"><a class="label icon-img" href="#"><span>Artikel 1.</span></a></li>
<li class="item"><a class="label icon-img" href="#"><span>Artikel 2.</span></a></li>
</ul>
</li>
<li class="item">
<input class="input" type="checkbox" name="groep-1.1.2" id="groep-1.1.2">
<label class="label icon-folder" for="groep-1.1.2"><span>Subparagraaf 2.</span></label>
<ul class="sub sub-l3">
<li class="item"><a class="label icon-img" href="#"><span>Artikel 1.</span></a></li>
<li class="item"><a class="label icon-img" href="#"><span>Artikel 2.</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="item">
<input class="input" type="checkbox" name="groep-3" id="groep-3">
<label class="label icon-folder" for="groep-3"><span>Hoofdstuk.</span></label>
<ul class="sub sub-l1">
<li class="item"><a class="label icon-img" href="#"><span>Artikel 1.</span></a></li>
<li class="item"><a class="label icon-img" href="#"><span>Artikel 2.</span></a></li>
<li class="item">
<input class="input" type="checkbox" name="groep-3.1" id="groep-3.1">
<label class="label icon-folder" for="groep-3.1"><span>Paragraaf 1.</span></label>
<ul class="sub sub-l2">
<li class="item"><a class="label icon-img" href="#"><span>Artikel.</span></a></li>
</ul>
</li>
<li class="item">
<input class="input" type="checkbox" name="groep-3.2" id="groep-3.2">
<label class="label icon-folder" for="groep-3.2"><span>Paragraaf 2.</span></label>
<ul class="sub sub-l2">
<li class="item"><a class="label icon-img" href="#"><span>Artikel 1.</span></a></li>
</ul>
</li>
<li class="item">
<input class="input" type="checkbox" name="groep-3.3" id="groep-3.3">
<label class="label icon-folder" for="groep-3.3"><span>Paragraaf 3.</span></label>
<ul class="sub sub-l2">
<li class="item"><a class="label icon-img" href="#"><span>Artikel.</span></a></li>
<li class="item">
<input class="input" type="checkbox" name="groep-3.3.1" id="groep-3.3.1">
<label class="label icon-folder" for="groep-3.3.1"><span>Subparagraaf 1.</span></label>
<ul class="sub sub-l3">
<li class="item"><a class="label icon-img" href="#"><span>Artikel 1.</span></a></li>
<li class="item"><a class="label icon-img" href="#"><span>Artikel 2.</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="item">
<input class="input" type="checkbox" name="groep-4" id="groep-4">
<label class="label icon-folder" for="groep-4"><span>Hoofdstuk.</span></label>
<ul class="sub sub-l1">
<li class="item"><a class="label icon-img" href="#"><span>Artikel.</span></a></li>
</ul>
</li>
<li class="item"><a class="label icon-img" href="#"><span>Artikel.</span></a></li>
</ul>
CSS code
article ul#menu,
article ul#menu li,
article ul#menu ul {
list-style: none;
}
.animated .label::before { /* animatie van icoonen. */
transition: transform 0.3s;
}
.sub {
display: none; /* standaar alle sub menu's verbergen. */
overflow: hidden;
}
.item {
user-select: none;
margin: 0.2em 0em 0.2em 0em; /* onderlinge item regels vergroot, i.v.m. iconnen. */
}
.input { /* verberg hoofd checkbox */
position: absolute;
opacity: 0;
}
.label {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
.label span {
order: 3;
}
/* icons */
.label::after, .icon-folder::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url(img/cd-icons.svg);
background-repeat: no-repeat;
margin-right : 0.5em; /* anders komen de iconen en tekst te dicht bij elkaar. */
}
.icon-folder::before {
order: 1;
}
.label::after {
order: 2;
}
/* Dit is een nieuwe manier, om dingen te combineren */
/*.icon-folder {
&::before { // arrow icon
background-position: 0 0;
transform: rotate(-90deg);
}
&::after { // folder icon
background-position: -16px 0;
}
}*/
.icon-folder::before { /* arrow icon */
background-position : 0 0; /* plaats waar pijl staat in de svg bestand. */
transform : rotate(-90deg);
}
.icon-folder::after { /* gesloten map icon */
background-position : -16px 0;
}
.icon-img::after { /* plaatje voor bestand als bergen. */
background-position: -48px 0;
}
.input:checked + .label::before { /* rotate arrow */
transform: rotate(0);
}
.input:checked + .label::after { /* show open folder icon if item is checked */
background-position: -32px 0; /* geopende map icon. */
}
.input:checked ~ .sub { /* laat children when item is checked */
display: block;
}
.sub-l1 .label {
padding-left : calc(0.25em + 0px); /* icoon is beter uitgelijnd met hoofd li */
}
.sub-l2 .label {
padding-left : calc(0.75em + 0px); /* icoon beter uitgelijnd met li niveau 1 */
}
.sub-l3 .label {
padding-left : calc(1.25em + 0px); /* icoon beter uitgelijnd met li niveau 2 */
}
.sub-l4 .label {
padding-left : calc(1.75em + 0px); /* icoon beter uitgelijnd met li niveau 3 */
/* Voor elke padding-left tel je 0.5em en 16px op.
Met andere woorden:
niveau 1 begint bij 0.25em en 16px
niveau 2 = 0.25 + 0.5 = 0.75em | 16 + 16 = 32px
niveau 3 = 0.75 + 0.5 = 1.25em | 32 + 16 = 48px
niveau 4 = 1.25 + 0.5 = 1.75em | 48 + 16 = 64px
*/
}