Webdesign 101 » Navigation » HV-menu

Ger Versluis' hierarkiske menu - 1

Ger Versluis' hierarkiske menu (HV-menu) er det menusystem, jeg (i hovedsagen) anvender på denne site. Det er et helt exceptionelt konfigurerbart system. Det er kommet i flere opdaterede udgaver, siden jeg tidligere skrev om systemet. Det er derfor på tide at komme med en opdateret artikel om systemet.

De artikler, jeg tidligere har skrevet om systemet, er

  1. DHTML modulbiblioteker
  2. Ger Versluis HV-menu

Disse artikler dækker de mest grundlæggende ting. I 6 artikler vil jeg her koncentrere mig om hovedpunkter i konfigureringen og gå lidt mere i detaljen end i de tidligere artikler.

  1. Menusystemet kan downloades som en zip-fil fra Ger Versluis hjemmeside http://www.burmees.nl/menu/
  2. Fra http://home.arcor.de/hermit/download/hvexpl/hv-tool.zip kan du downloade et menugenerator værktøj, der kan være en hjælp i forbindelse med konfigureringen af menuen.
  3. Disse artikler er baseret på version 9.10 fra 3. januar 2003
  4. Browserunderstøttelse: PC, Mac and Unix: IE4+, IE6+, NS4+, NS6, Mozilla, samt alle browsere, der er kompatible med disse, nu inklusive Opera (version 7).
  5. Bruger du DOCTYPE i "Standards Compliant Mode" på dine websider, findes en version, der er særlig egnet (for ikke at sige nødvendig) til dette (menucompat.zip).
  6. Systemet er gratis at bruge for ikke-kommercielle websites, men du skal betale en licens for et kommercielt site.

Fordele ved HV-menu:

ZIP-filens indhold

Den ZIP-fil, du kan downloade fra Gers website indeholder nu en næsten uoverskuelig mængde forskellige filer, bl.a. fordi der er ikke mindre end 5 eksempler på konfigurering. Disse eksempler er:

  1. HORIZONTALFRAMES.HTML - Horizontal frames setup, inkluderer
    • HorizontalFramesNavigation.htm
    • HorizontalFramesMainPage.htm
    • HorizontalFrames_var.js
  2. VERTICALFRAMES.HTML - Vertical frames setup, inkluderer
    • VerticalFramesNavigation.htm
    • VerticalFramesMainPage.htm
    • VerticalFrames_var.js
  3. HIDDENFRAMES.HTML - Hidden frame, inkluderer
    • HiddenFramesNavigation.htm
    • HiddenFramesMainPage.htm
    • HiddenFrames_var.js
  4. SINGLEPAGE.HTML - Single page, inkluderer
    • SinglePage_var.js
  5. RELATIVEPOSITIONED.HTML - Relative positioned, inkluderer
    • RelativePositioned_var.js

En nøje gennemgang af konfigureringsfilen finder du i

Frames eller Single Page

Sandsynligheden taler for, at du kun får brug for én bestemt type af menu, og du kan lisså godt nøjes med at kigge på den type, der passer til dine formål:

  1. Du synes, herren hjælpe mig, at frames er alle tiders og bruger dem altid i dine konstruktioner: Så er konfigurationerne 1 og 2 noget for dig.
  2. Du synes som jeg, at anvendelsen af frames skal reserveres til meget specielle situationer: Så er konfigurationerne 4 og 5 noget for dig.
  3. Og så kommer du som jeg i den meget specielle situation, og har derfor brug for at lave framesets, så de generer brugerne mindst muligt: Så er konfigurationen 3 noget for dig.

Menuens komponenter

Uanset hvilken af konfigurationerne, der er tale om, består menuen af 2 hovedkomponter: Kernefilen, menu9_com.js, som indeholder hele maskineriet, der laver menuen, og som du kun med yderste varsomhed bør foretage nogensomhelst rettelser i, samt en JavaScript fil, der kan hedde hvadsomhelst, og som indeholder alle de variable og de værdier, der skal til, for at kernefilen kan vide, hvordan menuen skal se ud.

Referencen til disse filer indsættes på siden, sålunde:

<script type="text/javascript">
function Go(){return}
</script> 
<script type="text/javascript" 
-->  src="menueksempel_var.js"></script>
<script type="text/javascript" 
-->  src="menu9_com.js"></script>
<noscript>Denne webside kan kun ses korrekt 
i en browser, der kan fortolke JavaScript,
</noscript> 

Det er fordelagtigt at indsætte disse filer nederst på websiden, lige før </body>-markøren, så de indlæses til sidst.

Betragter du variabelfilen - i eksemplet menueksempel_var.js - vi du se, at den består af 2 hoveddele:

  1. en del, der indeholder generelle informationer om menuens udseende og funktionalitet, samt
  2. en del, der indeholder de JavaScript Arrays, hvis indhold svarer til indholdet af hvert menupunkt.

Det er min erfaring med denne type menu, at det er en fordel af holde de to dele adskilte, således at ovennævnte eksempel på, hvorledes der refereres til JavaScript-filerne, ændres til:

<script type="text/javascript">
function Go(){return}
</script> 
<script type="text/javascript" 
-->  src="menuparametre.js"></script>
<script type="text/javascript" 
-->  src="menuarrays.js"></script>
<script type="text/javascript" 
-->  src="menu9_com.js"></script>
<noscript>Denne webside kan kun ses korrekt 
i en browser, der kan fortolke JavaScript.
</noscript> 

I dette eksempel indeholder filen menuparametre.js alt det, som kun sjældent eller aldrig skal ændres - nemlig menuens overordnede udformning. Den anden fil - menuarrays.js - omfatter alene de JavaScript Arrays, der danner de enkelte menupunkter. I heldigste fald kan denne fil genbruges sammen med forskellige udgaver af menuparametre.js. Det sker f.eks. her på Webdesign 101, hvor jeg for tiden er ved at reorganisere siten, og ønsker på nogle sider at anvende én udgave af menuen, på andre sider en anden udgave.

Et konkret eksempel

Klikker du på linket herunder, åbnes et nyt browservindue med en eksempelmenu. Hvorledes den er sat op, gennemgår jeg på de to følgende sider.

Vis eksempelmenu

1 2 3 4 5 6

Senest opdateret: 26. april 2003

Artikler om HV-menu

Menuens komponenter
Menuens hovedparametre
Menusystemets Arrays
Grafik i menuen
Orientering og position
JavaScript links

Eksempelmenu

Der er knyttet et eksempel til denne artikel. Det åbnes i et nyt browservindue ved at klikke på Eksempel 1.

E-mail nyhedsbrev

HV-menu og frames

HV-menu fungerer fortrinligt sammen med frameset-konstruktioner.
Da jeg imidlertid ikke synes, man skal bruge frames til almindelige websites, springer jeg let henover konfigureringen til til disse formål.

Vælg normal præsentation

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