Webdesign 101 – en webdesign notesblok

  1. Forsiden
    1. » Navigation
      1. » Dynamiske menuer med HTML-lister

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.

En del konstruktører/udviklere har arbejdet med dette igennem det sidste års tid. Det er lykkedes at udvikle en del menuer, der alle mere eller mindre opfylder de ideelle krav, der kan stilles til en sådan menu, først og fremmest den ønskede funktionalitet, som jeg netop har beskrevet.

Denne side præsenterer og kommenterer en række af disse forsøg og jeg har lavet eksempler på de fleste af dem.

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).

Raphaël Goetter

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

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

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.

Hvorom alting er, du kan – indtil videre i hvert fald – se hans menu på ovenstående url.

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.

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, 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.

Jeg er nu i færd med at forlade HV-menu til fordel for UDM4, som jeg finder bedre i tråd med tidens tendenser i webdesign.

Du kan se min implementering af denne menu som navigationsbjælken på denne side og på webstedets forside. Du kan se denne menu anvendt på min standardliste til de eksempler, der er knyttet til denne artikel: Eksempel 6.

Dave Lindquist

Using Lists for DHTML Menus var den første artikel om disse muligheder, som jeg læste for et års tid siden 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.

10. maj 2004

Links til eksemplerne

Læs også

Mine øvrige artikler om css-formaterede menuer:
Oversigt over artiklerne
Grundlæggende css-menuer
HTML-liste som navigationsbjælke

Nyttige links

CSS-Discuss – en email diskussionsgruppe om den praktiske anvendelse af CSS. Advarsel: kan være stærkt vanedannende.
www.listamatic.com – eksempler på og links til websteder om CSS-formatering af HTML-lister.

Webdesign med XHTML

– er endnu en bog om webdesign, jeg har begået, og som blev udgivet i marts 2004 af forlaget Globe. Du kan læse om mine ideer med denne bog på websiden "Webdesign med XHTML".

Du kan tegne et gratis abonnement på mit nyhedsbrev eller anbefale denne side til en ven ved at benytte de to indtastningsfelter herunder.

E-mail adresse for nyhedsbrev
Din vens e-mail adresse
Valid XHTML 1.0! Klik på mærket for at få information om min bog om websidekonstruktion Klik på mærket for at få information om min nethotel-sponsor [Valid RSS] Højreklik for at kopiere adressen på min nyhedskanal