Dynamiske menuer med HTML-lister

De indlysende fordele, der er ved at formatere HTML-lister som "flade" menuer, kunne vi ønske os overført til dynamiske menuer, således at indlejrede lister præsenteredes som dropdown undermenuer.

Denne artikel er oprindelig skrevet, da den eneste måde dette kunne opnås på, var ved hjælp af noget JavaScript.

Siden da har udviklingen af browsernes understøttelse af CSS-standarden gjort det muligt at lave ganske tilsvarende menuer, i princippet uden brug af JavaScript.

Det forklarer jeg om i artiklen Introduktion til stylesheet-formaterede menuer.

Denne side præsenterer og kommenterer forskellige konstruktioner, foretaget af andre. Inspireret af disse har jeg lavet 2 simple menupaneler og en simpel navigationsbjælke, der bygger på en JavaScript-drevet dynamik.

Vi du se et bredere udvalg af menuer end dem, jeg præsenterer, kan jeg meget anbefale Russ Weakley's http://css.maxdesign.com.au/listamatic/ oversigt over snesevis af forskellige menukonstruktioner.

JavaScript-lamme browsere

Problemet med mange af de JavaScript-drevne dynamiske menuer, der har været meget populære, er, at linksene som regel ligger i nogle arrays i et eksternt JavaScript. Derved forbliver linksene skjult for browsere, der ikke forstår JavaScript.

Det har betydning i forhold til søgerobotter, der ikke kan se menuens links og derfor ikke kan følge dem og indeksere de sider, der henvises til.

Det er også et problem i forhold til talende browsere (skærmlæsere) og i forhold til PDA'er, hvis browserfunktionalitet er noget begrænsede i forhold til de almindelige visuelle browsere, vi har adgang til at bruge på desktop og laptop computere.

Det er aldeles afgørende, hvis den type menuer anvendes, at der indsættes en noscript-markør, indeholdende links til i hvert fald de vigtigste sider. Desværre forsømmes det meget ofte.

Det er en af fordene ved de CSS-drevne dynamiske menuer, jeg beskriver i artiklen CSS dropdown menu og menubar, at menuen altid vil være synlig, uanset hvilken software, der anvendes til at læse siden.

For så vidt angår de menukonstruktioner, jeg beskriver i denne artikel, vil menuerne være fuldt synlige i en CSS-lam browsere, mens hovedmenupunkterne vil være synlige i en JavaScript-lam browser.

HTML-listen

Grundlaget for eksemplerne er HTML-listen herunder, der omfatter topmenupunkter uden undermenu, et par topmenupunkter med en undermenu, og et enkelt topmenupunkt med undermenuer på to niveauer (Introduktion > Rumfart).

<ul>
<li><a href="[url]">Solsystemet</a>
</li>
<li><a href="[url]">Introduktion</a>
  <ul>
    <li><a href="url">Astronomiens historie</a></li>
    <li><a href="url">Astronomi og matematik</a></li>
    <li><a href="url">Astronomi og fysik</a></li>
    <li><a href="url">Rumfart</a>
      <ul>
      <li><a href="url">Optakten</a></li>
      <li><a href="url">Sonder</a></li>
      <li><a href="url">Bemandede rumfarter</a></li>
      <li><a href="url">Måneforskningen</a></li>
      <li><a href="url">Marsforskningen</a></li>
      <li><a href="url">Perspektiverne</a></li>
      </ul>
    </li>
  </ul>
</li>
<li><a href="[url]">Indre planeter</a>
    <ul>
    <li><a href="[url]">Merkur</a></li>
    <li><a href="[url]">Venus</a></li>
    <li><a href="[url]">Jorden</a></li>
    <li><a href="[url]">Mars</a></li>
    </ul>
</li>
<li><a href="[url]">Asteroiderne</a>
</li>
<li><a href="[url]">Ydre planeter</a>
    <ul>
    <li><a href="[url]">Jupiter</a></li>
    <li><a href="url">Saturn</a></li>
    <li><a href="url">Uranus</a></li>
    <li><a href="url">Neptun</a></li>
    <li><a href="url">Pluto</a></li>
    </ul>
</li>
<li><a href="[url]">Kometskyen</a>
</li>
</ul>

Raphaël Goetter

Vel nok den simpleste af de multiniveau listemenuer, jeg har kunnet finde på Listamatic.

Findes i en vandret udgave – eksempel 1 – og lodret udgave – eksempel 2.

I sin nuværende form er menuen ikke beregnet til mere end de to niveauer som omfatter topmenuen og undermenuerne til første niveau. Derfor har jeg fjernet den indlejrede liste med underpunkter til "Rumfart"-punktet. I eksemplerne er du nødt til at brug "Vis kilde" for at se den konkrete udformning af HTML-listen.

Menuen er lidt stiv at arbejde med, for såvidt det er afgørende at undermenuerne har den samme bredde som topmenupunktet. Kan du leve med det, er denne løsning meget simpel og robust og meget velegnet til websteder, der har flere sektioner med op til 5-7 websider eller undersektioner. Menuen er meget let at kombinere med en anden menu på websiden, således at denne menu anvendes som hovedmenu, og en flad listemenu anvendes som sektionsmenu.

Jeg synes nok, set i forhold til de øvrige menuer, at listen skal maltrakteres en hel del med mouseover og mouseout og diverse kald til de to vis-og-skjul-funktioner, der sørger for at vise og skjule undermenuerne. Det kan gøres noget mere elegant, som vi skal se i de følgende eksempler.

Jeremys menu

8. juni 2006: Jeg kan ikke længere anbefale brugen af denne menu.

Den vigtigste årsag er en mangelfuld browserkompatibilitet, ikke mindst i forhold til Safari-browseren samt til Internet Explorer version 7, der er lige på trapperne mens jeg skriver dette.

Det ku' nok ordnes, men det er ærligt talt ikke ulejligheden værd, når der nu er så mange andre muligheder, hvoraf en del er beskrevet i denne sektion.

Til professionelt brug anbefaler jeg Universal Dropdown Menus, som jeg bekriver lidt længere nede i denne artikel.

Til dem, der gerne vil sysle lidt med tingene er der masser af muligheder i de øvrige artikler og eksempler, jeg har skrevet om i denne sektion.

Denne menu har en lidt interessant oprindelseshistorie. Jeg blev først præsenteret for den i diskussionsgruppen CSS-Discuss, hvor jeremy@sysop.com bad om response fra diskussionsgruppens deltagere på hans kreation, der kan betragtes på http://65.221.157.40/hnav/.

Jeg havde et par spørgsmål og kommentarer og brevvekslede kort med Jeremy om menuen. Da jeg nogle uger efter dette forsøgte at kontakte Jeremy igen på hans e-mail adresse, fik jeg den besked, at han ikke længere var ansat i firmaet. Jeg har ikke siden set ham i diskussionsgruppen.

Nu – godt et år efter – virker ovenstående link ikke, så du må nøjes med min udgave af menuen.

Princippet i denne menu er ganske interessant, omend Jeremy ikke er den eneste, der har udnyttet det:

En af vanskelighederne ved at lave lister som dynamiske menuer ved hjælp af CSS er, at kun ordentlige browsere tolker pseudo-egenskaben :hoveralle HTML-elementer, mens mindre gode browsere – og det vil i praksis sige Internet Explorer – kun tolker denne egenskab, når den anvendes på a-markøren.

Det vil sige, at vi sagtens kan anvende en formregelblok som f.eks.

#hnav li:hover > ul{
  display:block; position:absolute; 
  top:0; left:100%;}

Denne formregelblok virker efter bogen i de fleste moderne browsere, og sikrer at en ul der er barn af en li vises, når det overordnede li-element er i :hover-tilstand.

Internet Explorer kløjs imidlertid på både child-selektoren (>) og på :hover-tilstanden for li-elementet.

Imidlertid kan IE noget, som ingen andre browsere kan, nemlig lave dynamisk HTML ved hjælp af det, som Microsoft selv kalder "behaviors" (på dansk opførsel eller adfærd).

I lighed med sikkert mange andre har jeg ikke interesseret mig synderligt for denne mulighed, netop fordi en behavior jo falder til gulvet, hvis det ikke er en Internet Explorer, der læser siden.

Genistregen her er at bruge denne mulighed til at få Internet Explorer til at reagere på samme måde som alle andre browsere.

Det Jeremy har gjort er at oprette en formregel svarende til ovennævnte til benefice for Internet Explorer. Den ser således ud:

#hnav li.over ul{display:block; position:absolute;}

Denne formregelblok har ingen effekt i en ordentlig browser, fordi selektoren li.over er meningsløs. (Vi har ikke oprettet nogen class-attribut med værdien over). Derimod læses den af Internet Explorer, fordi vi ved hjælp af en behavior har givet selektoren mening for denne browser. Dermed læses hele formregelblokken, inklusive alternativet til child-selektoren, nemlig den kontekstuelle selektor li.over ul. Den siger, at en ul, der er indeholdt i en li skal have de egenskaber, der er givet i formregelblokken.

Det kan kun virke, når Internet Explorer får klar besked om, hvad den skal gøre. Denne besked får browseren via en formregel:

#hnav li{position:relative; float:left; 
  behavior:url(hover.htc);}

Selektoren behavior er ukendt for alle andre browsere end Internet Explorer, og disse andre browsere springer derfor denne formregel over. Derimod indlæser Internet Explorer den .htc-fil, der refereres til. Og det er i denne fil, li-elementet forsynes med den midlertidige class over, når musen er over elementet. Denne .htc-fil er basalt set en JScript eller JavaScript-fil, der i dette tilfælde har følgende udseende:

<attach event="onmouseover" handler="over" />
<attach event="onmouseout" handler="out" />
<script type="text/javascript">
function over(){
  tmpClassStr=element.className;
  tmpClassStr+='over';
  tmpClassStr=tmpClassStr.replace(/\s/g, 'over ');
  tmpClassStr+=' over';
  element.className=element.className+' '+tmpClassStr;
}

function out(){
	element.className='';
}
</script>

Jeg skal ikke gøre mig klog på hverken JavaScript eller behaviors – jeg er glad når folk som Jeremy stiller deres resultater til rådighed for os andre. Min version af menuen, der benytter listen i tekstboksen herover, ser du i eksempel 3.

Peter Nederhoff

:hover på ethvert element er Peter Nederhoffs begavede artikel om udviklingen af en MS behavior (.htc-fil), der gør det muligt at anvende :hover pseudo-klassen på et vilkårligt element i IE i stedet for kun på a-markøren.

Peter Nederhoffs eksempelmenu er ikke færdigudviklet. Som det fremgår af artiklen er der problemer med visningen i IE5.

Min version af denne menu finder du som eksempel 4. Jeg vil dog anbefale dig også at kigge på Nederhoffs demo. Hans ikoner er meget flottere end mine.

2004.05.15 gør jeg opmærksom på, at der på Peter Nederhoffs ovennævnte hjemmesider er publiceret et opdateret .htc-script. Det er ikke det, jeg har anvendt i mit eksempel.

The Suckerfish Dropdown Menu

Et af de mere vellykkede forsøg på at lave en dynamisk menu på baggrund af en HTML-liste, kun med CSS og en smule JavaScript.

Menuen kan ses på Suckerfish. Menuen er dokumenteret fint i en artikel på A List Apart.

Menu er meget flot og et godt lærestykke i, hvordan man laver sådant noget. Jeg præsenterer ikke noget eksempel på denne menu. En tilpasning til min standardliste som yder menuen fuld retfærdighed vil kræve en del arbejde, som jeg ikke er parat til at investere i en menu, jeg kun skal bruge som eksempel.

Alexander Vacic

ADxMenu: Alexander Vacic bruger også Microsoft behaviors efter nogenlunde samme opskrift som Jeremy. På webstedet præsenteres du for vel omkring et dusin eksempler på, hvorledes du kan formatere menuen som både en vandret navigationsbjælke og en lodretstillet mednu. Eksemplerne omfatter også forskellige visuelle udtryk på menuen.

Jeg præsenterer i eksempel 5 én af mange mulige tilpasninger af denne menu.

Bemærk at filen adxhover.htc er identisk med Peter Nederhofs ovennævnte csshover.htc.

Universal dropdown Menu

UDM4 er kulminationen af hvad der synes at være adskillige års udviklingsarbejde på at skabe en moderne dynamisk og hierarkisk menu udelukkende baseret på en HTML-liste.

Universal Dropdown menu distancerer de øvrige eksempler med flere hestelængder, på en række områder. Den kan konfigureres på mange forskellige måder, og webstedet har meget gode eksempler på, hvordan du kan formatere menuen. Der er gjort virkelig meget ud af tilgængeligheden, f.eks. findes der et modul, der giver adgang til en fremragende tastaturnavigation.

Nogle af mine læsere vil vide, at jeg igennem adskillige år har peget på Ger Versluis' HV-menu som det bedste hierarkiske menusystem til websites med et større antal sider. Jeg har også skrevet en del artikler om dette system, blandt andet Ger Versluis' hierarkiske menu.

I det visuelle udtryk minder UDM4 meget om dette system, men filosofien bag er væsentlig anderledes. Forestiller du dig f.eks. en browser med Javascript-tolkning slået fra, ser brugeren af denne browser intet til navigationsapparatet, hvis du anvender HV-menu. Anvender du UDM4, vil brugeren fortsat set hele menuen, nu blot i udfoldet stand. Det er meget værdifuldt i forhold til f.eks. søgerobotter, men naturligvis også for brugere, der er afhængige af en skærmlæser.

Det er naturligvis en ekstra bonus, at du nærmest umiddelbart kan anvende den liste, der danner grundlag for menuen, som Sitemap.

Du kan se denne menu anvendt på min standardliste til de eksempler, der er knyttet til denne artikel: Eksempel 6.

UDM4 update

Siden jeg i maj 2004 skrev denne artikel er der sket adskillige væsentlige forbedringer af UDM4 systemet. Væsentligst blandt disse er efter min mening det, som på hjemmesiden hedder Server-side frameworks.

Begrebet dækker over PHP og ASP-udgaver af applikationen, som potentielt kan nedbringe den faktisk overførte datamængde til omkr. 20 kilobyte. Derved fjernes en af de væsentligste indvendinger, man kunne have imod UDM4, nemlig at den i sine første udgaver virkede meget tung at danse med, fordi der skulle overføres i størrelsesordenen 50 kilobytes scripts for at få alle menuens faciliteter i gang.

Dave Lindquist

Using Lists for DHTML Menus var den første artikel om disse muligheder, som jeg læste i vinteren 2003 på www.gazingus.org. Jeg var noget betaget af det smarte princip, og skrev straks et par artikler om sagen ( Ekspanderende HTML-lister som menuer).

Jeg gjorde dengang ikke noget videre ved det den gang, blandt andet fordi menuen ikke er særlig pæn, når den betragtes i IE5 og andre lidt ældre browsere, der ikke lever helt op til W3C's dokumentobjektmodel.

Som tiden er gået bliver der imidlertid længere og længere mellem disse, og jeg vil i dag mene, at Daves menu – der findes i både en vandret og en lodret udgave – er et meget godt bud på en mere behersket dynamisk menu, baseret på en HTML-liste.

Martin Hinzmann

mhaList

Martin Hinzmann er en dansker, der har lavet et menusystem, der ligesom de øvrige er baseret på en liste i flere niveauer. Martins system kan uden videre konfigureres som et lodret menutræ eller en vandret navigationsbjælke, som jeg har gjort det i eksempel 7.

Martin har på ovennævnte websted en udmærket redegørelse for, hvorledes du anvender menuen. Jeg synes dog stadig, der er en del arbejde at gøre med stylesheet-formateringen af menupunkterne, hvis man ikke vil nøjes med den lidt farveløse udgave, jeg har som eksempel. Til eksemplet har jeg brug Martins standard-stylesheet i næsten uændret form.

I modsætning til Dave Lindquists menu er Martins mhaList-menu kompatibel over et noget bredere spektrum af browsere, inklusive Opera 7 og Internet Explorer 5. Som de øvrige menuer, der er nævnt her, vil også denne menu være synlig og brugbar i browsere, der ikke er i stand til at tolke stylesheets og JavaScript. Menuen overholder XHTML- og CSS-standarderne.

Denne side er senest opdateret: 10. October 2006

Kviklinks til artikler

Kviklinks til eksempler

Abonnér på nyhedsbrev
Søg på siderne
Anbefal siden til en ven

Webdesign – illustreret håndbog

– er i løbet af kort tid slået igennem som grundbogen for dem, der ønsker at lære sig websidekonstruktion, og tillige ønsker at gøre det på en håndværksmæssig solid måde. Køb den hos forlaget Globe.

Online support

Hvis du bliver abonnent på mit nyhedsbrev får du øjeblikkelig e-mail opdatering i tilfælde af rettelser eller uddybende forklaringer til eksempler og beskrivelser mine bøger.

Samtidig får du også gennem disse nyhedsbreve besked om nye og opdaterede artikler på dette websted.

Du kan læse mere om denne sag på websiden Nyhedsbrev.