Forsiden » Navigation » Dynamiske menuer » HTML-lister som menuer

Ekspanderende HTML-lister som hierarkiske menuer

I denne artikel udvides den ekspanderende HTML-liste til at omfatte undermenuer til undermenuerne. Idéen er at lave en dynamisk menu med 3 niveauer.

OBS! at Internet Explorer 5 ikke indsætter den padding, der er nødvendig for at indrykke teksten i listepunkterne.

I Eksempel 3 ser du hele menuen til Webdesign 101 formateret som HTML-lister med indlejrede lister, således at jeg opnår de 3 niveuaer, jeg ønsker.

HTML-kildekoden til de første to punkter i hovedmenuen ses i tekstboksen herunder. Det første menupunkt - "Generelt / Servicesider" - er lidt uinteressant, fordi alle links i denne sektion ligger i andet niveau. I sektionen "Artikler" har jeg derimod brug for at sætte links til siderne ind under 3 kategorier. Hver af disse 3 kategoriet bliver så menupunkter, der, hvis de aktiveres, åbner en menu i 3. niveau.

    <div id="mainMenu">
      <ul id="menuList">
        <li class="menubar">
          <a href="javascript:void(null)"
          title="Linktitel" 
          onfocus="this.blur()"  
          id="genereltAktiver" 
          class="actuator">
          Generelt / Servicesider ...</a>
            <ul id="genereltMenu" class="menu">
              <li><a href="[url]" 
              title="Linktitel"> Introduktion</a></li>
              <li><a href="[url]"
              title="Linktitel">Nyhedsbrev arkiv</a></li>
              <li><a href="[url]" 
              title="Linktitel" >Søg på siderne</a></li>
              <li><a href="[url]">
              title="Linktitel" Site Map</a></li>
              <li><a href="[url]" 
              title="Linktitel">Ikast Vejviser</a></li>
              <li><a href="[url]"
              title="Linktitel">Kursusweb</a></li>
              <li><a href="[url]"> 
              title="Linktitel">Links</a></li>
              </ul>
        </li>
        
        <li class="menubar">
          <a href="javascript:void(null)" 
          title="Linktitel" 
          onfocus="this.blur()" 
          id="artiklerAktiver" 
          class="actuator">
          Artikler ...</a>
            <ul id="artiklerMenu" class="menu">
              <li><a href="[url]">Oversigt</a></li>
              <li><a href="javascript:void(null)" 
              id="artiklerItAktiver" 
              class="actuator">IT-emner ...</a>
                <ul id="artiklerItMenu" class="submenu">
                  <li><a href="[url]">
                  Hvad er zip-filer?</a></li>
                  <li><a href="[url]">
                  FTP upload</a></li>
                </ul>
            </li>  
            <li><a href="javascript:void(null)"
            onfocus="this.blur()"  
            id="artiklerHtmlAktiver" 
            class="actuator">
            HTML-emner ...</a>
              <ul id="artiklerHtmlMenu" class="submenu">
                <li><a href="[url]" title="Linktitel">
                    Vis kildekode</a></li>
                <li><a href="[url]" title="Linktitel">
                    HTML tegnelementer</a></li>
                <li><a href="[url]" title="Linktitel">
                    Genbrug af Map-data</a></li>
              </ul>
            </li>
            <li><a href="javascript:void(null)"
            onfocus="this.blur()"  
            id="artiklerDesignAktiver" 
            class="actuator">
            Design-emner ...</a>
              <ul id="artiklerDesignMenu" class="submenu">
                <li><a href="[url]" title="Linktitel">
                Browsersniffing</a></li>
                <li><a href="[url]" title="Linktitel">
                Omdirigering</a></li>
                <li><a href="[url]" title="Linktitel">
                Hvad er en Java Applet</a></li>
              </ul>
            </li>
          </ul>   
        </li>
      </ul>
   </div>

HTML-kildekoden

Forskellen fra det første eksempel er til at overskue:

  1. Jeg har fortsat en class="menu" på de ul'er i 2. niveau, der rent faktisk er links til websider
  2. Alle li'er på første niveau har en class="menubar"
  3. Indholdet af listepunkterne på 1. niveau (topmenuen) er a-markører med inaktive href-attributter, men men egen id samt en class="actuator"
  4. En undermenu kan indeholde aktive links til webside. Disse er helt normale.
  5. Eller en undermenu kan indeholde a-makører med inaktive href-attributter, men igen med egen id og igen med class="actuator".
  6. Event-håndteringen onfocus="this.blur()" er ent kosmetisk, idet den fjerner den stiplede ramme, der dannes, når der klikkes på et aktivt element.

Stylesheet'et

Stylesheet'et for denne liste ses i tekstboksen herunder:

#mainMenu {
    font-family: arial,helvetica, sans-serif;
    background-color: #ffE;
    border: 1px solid #000;
    color: #000;
    width: 180px;
    margin-bottom: 10px;
}
#menuList {
    margin: 0px;
    padding: 5px 0px 5px 5px; 
}
li.menubar {
    background: url([sti]firkant.gif) no-repeat 0em 0.3em;
    font-size: 12px;
    line-height: 1.5em;
    list-style: none outside;
}
.menu, .submenu {
    display: none;
    margin-left: 12px; 
    padding: 0px;
    margin-bottom:5px;
}
.menu li, .submenu li {
    background: url([sti]firkant.gif) no-repeat 0em 0.3em;
    list-style: none outside;
}
a.actuator {
    background-color: transparent;
    color: #000;
    font-size: 12px;
    padding-left: 12px;  
    text-decoration: none;
}
a.actuator:hover {
    text-decoration: underline;
}
.menu li a, .submenu li a {
    background-color: transparent;
    color: #000;
    font-size: 12px;
    padding-left: 12px;
    text-decoration: none;
}
.menu li a:hover, .submenu li a:hover {
    text-decoration: underline;
}

Der er en hel del at nusse med her for at få et godt resultat, der passer til den menu, du ønsker dig. Men kildekoden herover et et udmærket sted at starte. Det er værd at bemærke, at billedet, der udgør listepunktets marker (punkttegn eller bullet), er indsat som baggrundsbillede. Jeg har ikke undersøgt muligheden for at udføre dette med list-style-image-egenskaben.

Det sidste var måske nok værd at undersøge, for så vidt teksten står oven i punkttegnene i Internet Explorer 5. Menuen er forsat anvendelig i denne browser, men det er ikke pænt.

JavaScriptet

Jeg bruger igen et script, jeg har downloadet fra www.gazingus.org:

if (!document.getElementById)
    document.getElementById = function() { return null; }
    
function initializeMenu(menuId, actuatorId) {
  var menu = document.getElementById(menuId);
  var actuator = document.getElementById(actuatorId);
  
  if (menu == null || actuator == null) return;
    
  actuator.parentNode.style.backgroundImage = 
            "url([sti]arrowdown.gif)";
            
  actuator.onclick = function() {
      var display = menu.style.display;
      this.parentNode.style.backgroundImage = 
            (display == "block") ? 
            "url([sti]arrowdown.gif)" : 
            "url([sti]arrowup.gif)";
      menu.style.display = (display == "block") ? 
            "none" : "block";
        return false;
  }
}

window.onload = function() {
  initializeMenu("genereltMenu", "genereltAktiver");
  initializeMenu("artiklerMenu", "artiklerAktiver");
  initializeMenu("artiklerItMenu", "artiklerItAktiver");
  initializeMenu("artiklerHtmlMenu", "artiklerHtmlAktiver");
  initializeMenu("artiklerDesignMenu", "artiklerDesignAktiver");
  initializeMenu("cssMenu", "cssAktiver");
  initializeMenu("cssTekstMenu", "cssTekstAktiver");
  initializeMenu("cssLayoutMenu", "cssLayoutAktiver");
  initializeMenu("cssRolloverMenu", "cssRolloverAktiver");
  initializeMenu("cssListerMenu", "cssListerAktiver");
  initializeMenu("jsMenu", "jsAktiver");
  initializeMenu("jsTipsMenu", "jsTipsAktiver");
  initializeMenu("slideshowsMenu", "slideshowsAktiver");
  initializeMenu("navMenu", "navAktiver");
  initializeMenu("navDynaMenu", "navDynaAktiver");
  initializeMenu("navApiMenu", "navApiAktiver");
  initializeMenu("farverMenu", "farverAktiver");
  initializeMenu("dhtmlMenu", "dhtmlAktiver");
  statuslinie(); /* Kalder min egen egen JavaScript function,
                 der skriver en tekst i statuslinien. */
}

Kommentarer til scriptet: Det er selvfølgelig dødnødvendigt at du omhyggelig holder styr på dine id'er og sørger for, at de kommer til at korrespondere til de rette aktive elementer.

I såvel script som stylesheet har jeg markeret [sti], fordi du her selv må sætte stien ind til de respektive grafikker. I den sammenhæng skal du huske, at stien fra et JavaScript til en grafik er relativ til den side, hvor scriptet er indsat, mens den i et stylesheet er relativ til css-filens placering i filsystemet.

1 2 3 4

Senest opdateret: 26. juli 2003

E-mail nyhedsbrev

Vælg normal præsentation

Vis siden som den ser ud i udskrift Send siden til udskrift.