Um die Auswahlnavigation zu nutzen muss die Datei ToggleNavi.js eingebunden werden. Dann wird ein neues Objekt ToggleNavi mit dem new-Operator erzeugt und ihm eine Referenz auf das jeweilige ul-Element übergeben. Beispiel:
window.onload = function() {
var ul = new ToggleNavi(document.getElementsByTagName("ul")[0]);
};
Ausgewählter Listenpunkt ist der, der kein a-Element enthält; ihm wird die Klasse selected zugewiesen. Alle anderen erhalten die Klasse hidden, welche damit per CSS leicht separat formatierbar sind.
Das erzeugte Objekt verfügt über die drei Methoden toggle (schaltet die Sichtbarkeit um), show (blendet die Liste ein) und hide (blendet die Liste aus). Hiermit kann die Sichtbarkeit der Liste per JavaScript jederzeit beliebig geändert werden. Beispiel:
ul.toggle(); // Liste ein- oder ausblenden
Steht kein JavaScript zur Verfügung, bleibt die Navigation unverändert benutzbar.