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

Ekspanderende HTML-lister som menuer

Som jeg demonstrerede i artiklerne om CSS-formatering af HTML-lister, kan du give en menu både et flot udseende og en hensigtsmæssig listestruktur alene ved hjælp af nogle stylesheets. Med kraftig inspiration fra www.gazingus.org bringer jeg her princippet i anvendelse for at lave en ekspanderende menu.

I eksempel 1 ser du en sådan menu. Første trin i udviklingen af denne er konstruktionen af en simpel liste med indlejrede lister. Jeg har taget udgangspunkt i en liste, jeg allerede har, nemlig det sitemap, der allerede findes vedr. websiderne på min website.

I kassen herunder ser du kildekoden til de første to hovedpunkter i denne liste. I forhold til originalen har jeg tilføjet nogle class'es og id'er til listerne og listepunkterne.

<div id="mainMenu">
  <ul id="menuList">
    <li class="menubar">
        <a href="javascript;void(null)" 
        id="genereltAktiver" 
        class="Aktiver">Generelt/Servicesider</a>
      <ul id="genereltMenu" class="menu">
        <li><a href="#">
        Søg på siderne</a></li>
        <li><a href="#">
        Site Map</a></li>
        <li><a href="#">
        Links til webdesign ressourcer</a></li>
        <li><a href="#">
        Ikast vejviser</a></li>
        <li><a href="#">
        Kursusweb</a></li>
      </ul>
    </li>
    <li class="menubar">
        <a href="javascript;void(null)" 
        id="artiklerAktiver" 
        class="Aktiver">Artikler om diverse emner</a>
      <ul id="artiklerMenu" class="menu">
        <li><a href="#">
        Hvad er zip-filer</a></li>
        <li><a href="#">
        FTP upload</a></li>
        <li><a href="#">
        Vis Kildekode</a></li>
        <li><a href="#">
        HTML tegnækvivalenter</a></li>
        <li><a href="#">
        Genbrug af MAP-data</a></li>
        <li><a href="#">
        Overblændingsfiltre</a></li>
        <li><a href="#">
        Kontrol med cursorens udseende</a></li>
        <li><a href="#">
        Stylesheets til udskrift</a></li>
        <li><a href="#">
        Omdirigering</a></li>
        <li><a href="#">
        Browsersniffing</a></li>
        <li><a href="#">
        Hvad er en Java Applet?</a></li>
      </ul>
    </li>
  </ul>
</div>

Jeg har i eksemplet herover lavet nogle ændringer i forhold til de lister, der udgør mit Site Map. For det første har jeg indsat nogle blinde links for at spare plads. For det andet - og nok så vigtigt - opererer jeg i dette eksempel kun med ét ekstra niveau, hvorimod både mit nuværende menusystem og mit Site Map opererer med 2 ekstra niveauer. Hvordan jeg klarer den handler den næste side om.

Tilbage til det aktuelle eksperiment: Det stylesheet, der formaterer listerne, ses herunder. Jeg har indsat nogle forklarende kommentarer med grøn skrift.

#mainMenu {                     /* #mainMenu formaterer */
  font-family:arial,sans-serif; /*kassen, der rummer menuen */
  font-size:12px;
  background-color: #ffe;
  border: 1px solid #000;
  color: #000;
  width: 180px;
  margin-bottom:10px;
}

#menuList {                  /* #menuList formaterer */ 
  margin: 0px;               /* den overordnede liste */ 
  padding: 5px 0px 5px 20px;
}

li.menubar {                /* .menubar formaterer liste- */
  font-size: 12px;          /* punkterne i den overordnede liste */
  line-height: 1.5em;
  list-style: url(arrowdown.gif) none;
  list-style-type:square;   /* Viser blå firkant mens siden */
  color:blue;               /* loades */
}

li.menubar a {              /* Her formateres indholdet*/
  background-color:         /* af den overordnede listes */
    transparent;            /* listepunkter */
  color: #000;                  
  font-size: 12px;
  text-decoration: none;
}
li.menubar a:visited {  /* Der indlæses ingen ny webside */
  background-color:     /* ved et klik. Derfor ens farve */
    transparent;
  color: #000;                    
  font-size: 12px;
  text-decoration: none;
}
.menu {                  /* .menu formaterer den indlejrede  */
  display: none;         /* ul-liste, primært venstre margin */ 
  margin-left: 15px;
  padding: 0px;
}

.menu li {                  /* .menu li formaterer liste-  */
  list-style:               /* punkterne i den indlejrede */ 
    url(firkant.gif) none;  /* liste */ 
}                                     

.menu li a {              /* Her formateres listepunkternes */
  background-color:       /* indhold i den overordnede */
      transparent;        /* liste */
  color: #000;                      
  font-size: 12px;
  text-decoration: none;
}

.menu li a:hover {
  border-bottom: 1px solid #000;
}

Det var kildekoden til listen med indlejrede lister, samt stylesheet'et til disse lister. Nu kommer så udfordringen med at vise og skjule de underordnede lister. Her er vi nødt til at bruge noget JavaScript. Vi skal jo fange en hændelse på websiden, nemlig et klik eller en mouseover på et af listepunkterne i den overordnede liste.

Der er to måder at ordne dette på - som sædvanlig den lette måde og den svære måde. Den lette måde er at kopiere det JavaScript, som David Lindquist har lavet til prototyperne på denne form for menuer. Jeg synes det er elegant, men også lidt uigennemskueligt for den mindre øvede (som jeg vist selv hører til...). Den anden måde er at gøre det selv.

Gazingus-metoden

Downloader vi det JavaScript, som findes på www.gazingus.org vedr. denne sag, består det af to dele. Dels et JavaScript, der indeholder de relevante variable og funktioner:

  if (!document.getElementById)
  document.getElementById = function() { return null; }

function initializeMenu(menuId, AktiverId) {
  var menu = document.getElementById(menuId);
  var Aktiver = document.getElementById(AktiverId);

  if (menu == null || Aktiver == null) return;

  Aktiver.parentNode.style.listStyleImage = "url(arrowdown.gif)";
  Aktiver.onclick = function() {
      var display = menu.style.display;
      this.parentNode.style.listStyleImage =
          (display == "block") ? 
              "url(arrowdown.gif)" : "url(arrowup.gif)";
      menu.style.listStyleImage = "url(firkant.gif)";
      menu.style.display = (display == "block") ? "none" : "block";

      return false;
  }
}

- og dels et initieringsscript, der ved indlæsningen af siden sørger for at initialisere en række variable, der modsvarer de objekter, der skal fange de aktuelle events og de objekter, som skal ændres ved en event:

  window.onload = function() {
      initializeMenu("genereltMenu", "genereltAktiver");
      initializeMenu("artiklerMenu", "artiklerAktiver");
      initializeMenu("cssMenu", "cssAktiver");
      initializeMenu("javascriptMenu", "javascriptAktiver");
      initializeMenu("navMenu", "navAktiver");
      initializeMenu("farveMenu", "farveAktiver");
      initializeMenu("dhtmlMenu", "dhtmlAktiver");
      initializeMenu("searchMenu", "searchAktiver");
  }

Sætter du disse to scripts ind i toppen af siden sammen med stylesheet'et og nogle lister i en liste, svarende til dine behov, har du din menu. Du skal dog indprente dig korrespondancen mellem id'erne for de aktive listepunkter og ul'er

Som nævnt er denne side i sig selv et eksempel på en sådan "foldeud"-menu baseret på HTML-lister, idet hovedmenuen til venstre er konstrueret på præcis denne måde.

Afsluttende bemærkninger

Du bør bemærke, at konstruktionen er således, at hver undermenu skal lukkes igen ved et klikke på det aktive element. Undlader du det, men klikker på dem alle efter tur, får du sidst åbnet en meget lang række undermenuer. Jeg synes bedre om, at en åben undermenu lukkes som en følge af, at en anden undermenu åbnes. Dette eksperiment gennemgår jeg på den følgende side, Alternativ JavaScript løsning.

1 2 3 4

Senest opdateret: 26. juli 2003

Det er ikke mine ideer!

En enkelt læser har kritiseret mig for ikke tilstrækkeligt at fremhæve kilder til de ideer, jeg præsenterer på denne site.

Jeg synes nu jeg er ganske flink til det. Men for at der ikke skal være nogen tvivl: Ideerne til de 4 websider i denne sektion stammer fra David Lindquist, www.gazingus.org, som er bekendt med at jeg har skrevet disse artikler.

E-mail nyhedsbrev

Vælg normal præsentation

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