A-Z List

Eine A-Z-Liste kann mit dem Modul A to Z List dargestellt werden. Dieses Modul beinhaltet eine Navigation und die jeweiligen Abschnitte pro Buchstabe, mit der Möglichkeit eine Liste von Links pro Buchstabe anzuzeigen. Die Navigation besteht in diesem Fall aus Sprungmarken, die die Überschriften mit der entsprechenden ID in den Fokus scrollen.

An A to Z List can be shown with the A to Z List module. This module includes a navigation system and the respective sections in alphabetical order. It also has the possibility of displaying a list of links for each letter. In this case the navigation system consists of jump links that scroll to the headings with the corresponding IDs.

.modul-azlist

HTML


<div class="modul-azlist" id="myazlist8468">
    <nav class="azmap" aria-label="A bis Z Sprungmarken">
        <ul class="azlist-pager">
            <li><a href="#myazlist8468-A">A</a></li>
            <li class="active" aria-current="page"><a href="#myazlist8468-B">B</a></li>
            <li><a href="#myazlist8468-S">S</a></li>
        </ul>    
    </nav>
    <div class="azlist-letter" id="myazlist8468-A">
        <h2 class="letter">A</h2>
        <a class="to-top" href="#myazlist8468">Zum Listenanfang</a>
    </div>
    <ul>
    <li>
        <a href="#">Aorem ipsum dolor</a>
    </li>
    <li>
        <a href="#">Aorem ipsum dolor</a>
    </li>
    <li>
        <a href="#">Aorem ipsum dolor</a>
    </li>
 
    </ul>
    <div class="azlist-letter" id="myazlist8468-B">
        <h2 class="letter">B</h2>
        <a class="to-top" href="#myazlist8468">Zum Listenanfang</a>
    </div>
    <ul>
    <li>
        <a href="#">Borem ipsum dolor</a>
    </li>
    <li>
        <a href="#">Borem ipsum dolor</a>
    </li>
    <li>
        <a href="#">Borem ipsum dolor</a>
    </li>
 
    </ul>
    <div class="azlist-letter" id="myazlist8468-S">
        <h2 class="letter">S</h2>
        <a class="to-top" href="#myazlist8468">Zum Listenanfang</a>
    </div>
    <ul>
    <li>
        <a href="#">Sorem ipsum dolor</a>
    </li>
    <li>
        <a href="#">Sorem ipsum dolor</a>
    </li>
    <li>
        <a href="#">Sorem ipsum dolor</a>
    </li>
 
    </ul>
 
</div>