Navigationsbjælke med dropdown-menu

En sådan navigationsbjælke ser du i Eksempel 4. I tekstboksen herunder gengiver jeg HTML-kildekoden til de første 3 hovedpunkter i menuen:

HTML-kildekoden

<div id="mainMenu">
<ul id="menuList">
  <li class="menubar">
    <a href="javascript:void(null)" 
    id="genereltActuator" 
    class="actuator">
    Generelt / Servicesider</a>
    <ul id="genereltMenu" class="menu">
      <li><a href="#">Introduktion</a></li>
      <li><a href="#">Nyhedsbrev / arkiv</a></li>
      <li><a href="#">Søg på siderne</a></li>
      <li><a href="#">Site Map</a></li>
      <li><a href="#">Ikast Vejviser</a></li>
      <li><a href="#">Kursusweb</a></li>
      <li><a href="#">Links</a></li>
    </ul>
  </li>
  <li class="menubar">
    <a href="javascript:void(null)" 
    id="artiklerActuator" 
    class="actuator">
    Artikler</a>
    <ul id="artiklerMenu" class="menu">
      <li><a href="#">Oversigt</a></li>
      <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-tegnelementer</a></li>
      <li><a href="#">Genbrug af MAP-data</a></li>
      <li><a href="#">Browsersniffing</a></li>
      <li><a href="#">Omdirigering</a></li>
      <li><a href="#">Hvad er en Java Applet?</a></li>
      <li><a href="#">Kodeordsbeskyttelse</a></li>
    </ul>
  </li>
  
  <li class="menubar">
    <a href="javascript:void(null)" 
    id="cssActuator" 
    class="actuator">
    CSS (Stylesheets)</a>
    <ul id="cssMenu" class="menu">
      <li><a href="#">Oversigt</a></li>
      <li><a href="#">Se mor, uden tabeller!</a></li>
      <li><a href="#">CSS tekstformatering</a></li>
      <li><a href="#">Formatering af lister</a></li>
      <li><a href="#">CSS-layout af websider</a></li>
      <li><a href="#">CSS-rollover</a></li>
      <li><a href="#">Cursorkontrol</a></li>
      <li><a href="#">Stylesheets til udskrift</a></li>
    </ul>
  </li>
</ul>
</div>

Bemærk her:

1. #mainMenu er den kasse, der omslutter hele menuen, og bl.a. tjener til at placere menuen på siden, der hvor jeg vil ha' den.
2. Den overordnede liste har en id="menuList"
3. Hvert listepunkt i den overordnede liste har en class="menubar"
4. Hver indlejret liste har en class="actuator" og sin egen id

Stylesheet'et

Stylesheet'et til disse lister ser du herunder:

#mainMenu {
    font-family:arial,sans-serif;
    font-size:12px;
    background-color: #1a0099;
    border: 1px solid #1a0099;
    color: #fff;
    margin: 0px;
    margin-top:5px;
    padding: 0px 0px 2px 0px;
    text-align:center;
}
#menuList {
    margin: 0px;
    padding: 0px;
}
#menuList ul {
    margin: 0px;
    padding: 0px;
    text-align:left;
    font-weight:bold;
}

#menuList li {
    display: inline;
    list-style: none;
}
.menubar {
    font-weight:bold;
    border-left:1px solid white;
}
a.actuator {
    background-color: transparent;
    color: #fff;
    font-size: 12px;
    margin: 0px;
    padding: 3px 6px;
    text-decoration: none;
}
a.actuator:hover {
    background-color: white;
    color: #1a0099;
}
.menu {
    color: #1a0099;
    background-color: #fff;
    position: absolute;
    visibility: hidden;
    z-index:9;
}
.menu li a {
    background-color: #1a0099;
    color: #fff;
    display: block;
    font-size: 12px;
    line-height: 1.75em;
    margin: 0px;
    padding: 0px 10px;
    text-decoration: none;
    border:1px solid black;
    border-top:none;

}
.menu li a:visited {
    background-color: #1a0099;
    color: #ccc;
}
.menu li a:hover {
    background-color: white;
    color: #1a0099;
}
#genereltMenu { width: 130px; }
#artiklerMenu { width: 160px; }
#cssMenu { width: 160px; }
#jsMenu { width: 170px; }
#navMenu { width: 180px; }
#farverMenu { width: 160px; }
#dhtmlMenu { width: 160px; }
#searchMenu { width: 130px; }

Det er en ganske omfattende affære, som du uden tvivl kan komme til at file en del på, før du får et udseende på din liste, som passer dig. Der er 3-4 hovedpunkter, som jeg vil henlede din opmæksomhed på:

1. Det kan være nødvendigt at nulstille dine listemarkør-formregler før du begynder at formatere din navigationsbjælke:
   ul {margin:0;padding:0;}
ul li {margin:0; padding:0;}
2. Jeg gentager, at #mainMenu fortrinsvis er til placering af menuen, samt til menuens overordnede egenskaber såsom skriftfamilie og skriftstørrelse.
3. I sidste del af stylesheet'et sættes bredden af de enkelte undermenuer, og altså ikke bredden af hovedmenuens punkter. Disse indretter sig efter tekstmængden i de enkelte punkter.

Bemærk, at et punkt i hovedmenuen forsynes med en stiplet ramme, når du aktiverer dette menupunkt. Det er en browseregenskab, der tjener til at indikere, hvilket aktivt element på websiden, der aktuelt er i i fokus. Den kan let fjernes ved at forsyne de pågældende elementer med et lille event-drevet Javascript:
onFocus="this.blur()"
Jeg er imidlertid i tvivl om, hvor hensigtsmæssigt det er at foretage en sådan smukkesering: Websidens tilgængelighed lider under det.

JavaScriptet

Funktionaliteten af denne menu - altså at en undermenu ruller ned, når der klikkes på et menupunkt - beror på en JavaScript hændelse ved et klik på et af hovedpunkterne.

var currentMenu = null;

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.onmouseover = function() {
        if (currentMenu) {
            currentMenu.style.visibility = "hidden";
            this.showMenu();
        }
    }
  
    actuator.onclick = function() {
        if (currentMenu == null) {
            this.showMenu();
        }
        else {
            currentMenu.style.visibility = "hidden";
            currentMenu = null;
        }

        return false;
    }

    actuator.showMenu = function() {
        menu.style.left = this.offsetLeft + "px";
        menu.style.top = this.offsetTop + this.offsetHeight + "px";
        menu.style.visibility = "visible";
        currentMenu = menu;
    }
}

    window.onload = function() {
        initializeMenu("genereltMenu", "genereltActuator");
        initializeMenu("artiklerMenu", "artiklerActuator");
        initializeMenu("cssMenu", "cssActuator");
        initializeMenu("jsMenu", "jsActuator");
        initializeMenu("navMenu", "navActuator");
        initializeMenu("dhtmlMenu", "dhtmlActuator");
        initializeMenu("searchMenu", "searchActuator");
}

Jeg bruger uden videre det JavaScript, David Gazingus fra www.gazingus.org har udviklet til dette formål. Det er ikke helt let at gennemskue, men essensen er, at klikkes der på et element med class="actuator" udløses først function(), der finder egenskaberne ved menuID og actuatorID og dernæst udløser funktionen showMenu() for det aktuelle element (this.showMenu()).

Konklusion

Jeg har igennem 4 artikler i denne sektion vist, hvorledes du kan videreføre den gode idé med at bruge HTML-listens struktur til menuer også til dynamiske menuer i flere niveauer.

Webdesign 101 | | Jørgen Farum Jensen | | webmaster@webdesign101.dk
Copyright © 2002,2003 Jørgen Farum Jensen