!!! Listing 1: HTML-Fragment

Erweiterbares Menü

blindtext blindtext blindtext ...

!!! Listing 2: !!! Listing 3: menu.js var isDHTML = 0; var isID = 0; var isAll = 0; var isLayers = 0; if (document.getElementById) { isID = 1; isDHTML = 1; } else { if (document.all) { isAll = 1; isDHTML = 1; } else { browserVersion = parseInt(navigator.appVersion); if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) { isLayers = 1; isDHTML = 1; } } } function findDOM(objectID, withStyle) { if (withStyle == 1) { if (isID) { return (document.getElementById(objectID).style); } else { if (isAll) { return (document.all[objectID].style); } else { if (isLayers) { return (document.layers[objectID]); } } } } else { if (isID) { return (document.getElementById(objectID)); } else { if (isAll) { return (document.all[objectID]); } else { if (isLayers) { return (document.layers[objectID]); } } } } } function toggleMenu(vMenu) { if (isAll || isID && (navigator.appName.indexOf('Opera') != 0 || (navigator.appName.indexOf('Opera') == 0 && parseInt(navigator.appVersion.substring(0,1)) > 6))) { domStyleMSub = findDOM(vMenu, 1); if (domStyleMSub.display =='block') { domStyleMSub.display = 'none'; } else { domStyleMSub.display = 'block'; } } else { alert('Dieser Browser unterstützt nicht das DOM des W3C.')} } !!! Listing 4: Weitere Ebene #mSub1, #mSub2, #mSub21 { display: none; } .level4 { padding-left: 20px; padding-top: 5px; }
Menüpunkt 2.1.1
> !!! Listing 5: Javascript ohne DOM-Abfrage function toggleMenu(vMenu) { domStyleMSub = document.getElementById(vMenu).style; if (domStyleMSub.display =='block') { domStyleMSub.display = 'none'; } else { domStyleMSub.display = 'block'; } }