Webdesign 101 noter om

Navigation

Næstefter overførselstiden for dine websider er dit navigationssystem det, der bør optage dig mest.

Dit navigationssystem er din grænseflade til brugeren. Det er din mulighed for at gøre dit websted overskueligt og let tilgængeligt for dine brugere. Eller det modsatte.

Navigationssektionen omfatter 4 undersektioner, nemlig

  1. en sektion med fire artikler om nogle grundlæggende navigationsprincipper,
  2. En sektion med et antal artikler om formtering af menuer ved hjælp af stylesheets,
  3. en sektion med diverse eksperimenter i anvendelsen af dynamisk HTML til navigations- og menusystemer, samt
  4. en sektion med artikler, der beskriver forskellige menusystemer, der kan downloades fra nettet som JavaScript-drevne DHTML-applikationer.

Grundlæggende navigations- og menusystemer

Grundlæggende navigation

Menuer som eksterne filer

Folde-ud-menuer med HTML

FORM SELECT menuer

Stylesheet-formaterede menuer

CSS-rollover menu

Flotte menuknapper med CSS

Navigationsbjælke med stylesheet

Fanebladsmenuer

CSS universalløsninger

Jeg har efterhånden skrevet så mange artikler om stylesheet-formaterede menuer, at jeg selv har svært ved at finde rundt i dem.

Derfor har jeg skrevet en oversigtsartikel om emnet samt to artikler med universalløsninger på hhv. den lodrette menu og navigationsbjælken. Artikler om stylesheet-formaterede menuer. (Februar 2004).

Eksperimenter med DHTML-menuer

Disse sider præsenterer en række eksperimenter med udviklingen af dynamiske menuer, fra en forholdsvis simpel model til nogle mere komplicerede modeller. Har du ikke lyst til at arbejde eksemplerne igennem, er du velkommen til at kopiere kildekoden. Du kan også kigge på nogle af de mere professionelle "færdigkogte" menu modulbiblioteker i sektionen med DHTML-menu API'er

De eksempler, jeg har lavet, er følgende:

Simpel dropdownmenu
Det simpleste eksempel på en dynamisk menu - menuen åbnes og lukkes ved klik på en knap. En anden udgave er Simpel dropdown - display-attributten.
Dropdownmenu med undermenuer
I dette eksempel er menupunkterne forsynet med underpunkter, så vi får en hierarkisk menu.
Menubjælke med dropdownmenuer
Flere dropdownmenuer ved siden af hinanden udgør en navigationsbjælke.
Menubjælke med undermenuer
Denne er endnu på et sådant eksperimentalstadium, at jeg ikke har lyst til at publicere mine noget utilfredsstillende resultater. Ideen her er, at hver af dropdownmenuerne i eksemplet Menubjælke med dropdownmenuer skal kunne forsynes med undermenuer. I princippet er der ikke vildt mange ben i det, i praksis skal der en bedre metode til at positionere undermenuerne end den, jeg har anvendt i de tidligere tilfælde med flere lag hierarkieske menuer.
Har du brug for en sådan funktionalitet her og nu, kan jeg henvise til Ger Versluis' HV-menu
Flyout
Med nogle få ændringer af de allerede udviklede scripts kan vi lave en meget sjov lille "flyout"-menu.
Harmonikamenu
Dette er mit favoritprojekt lige for tiden. I den foreliggende form virker den udmærket, men der kan gøres meget for at effektivisere koden og gøre den mere konfigurerbar. Du kan naturligvis bruge eksemplet alligevel, men har du brug for en færdigudviklet menu af denne type, skulle du måske kigge på Thomas Brattli's Slidemenu.
Flydende menu
En menu, der altid er synlig på siden, uanset hvordan der scrolles eller resizes. Kan også anvendes til en "Gå-til-toppen-af-siden"-pil, der altid kan ses.

DHTML-menu API'er

En oversigt over nogle menusystemer, der bygger på dynamisk HTML, og som er tilgængelige på nettet som det, jeg kalder "halvfabrikata". En måske mere korrekt betegnelse er JavaScript API'er. API betyder Applikation Programming Interface. Der er her tale om systemer med en færdigudviklet "kerne" i form af en JavaScript komponent, samt et eller flere tilhørende JavaScripts, som anvendes til at passere de relevante variable til kerne-scriptet.

Der er i alle tilfælde tale om menuer, som jeg har afprøvet i større eller mindre omfang.

David Lindquists ekspanderbare lister
David (www.gazingus.org) har arbejdet videre med de ideer, der ligger til grund for CSS-formateringen af HTML-lister. Det er lykkedes ham at udvikle nogle JavaScript, der gør sådanne lister dynamiske.
Ger Versluis HVmenu
Et fremragende DHTML-menusystem, bestående af nogle JavaScript komponenter, der gør menusystemet meget fleksibelt. Hierarkisk med et vilkårligt antal menuer. Kan anvendes i framset og uden, i både lodret og vandret udførelse.
Peter Belesis' "Hierarchical Menus"
Et uhyre anvendeligt og meget veldokumenteret system, som imidlertid ikke må anvendes uden licensafgift.
Thomas Brattli's "Cool Menus"
Et stort antal forskellige dynamiske menuer i mange forskellige konfigurationer.
Thomas Brattli's SlideMenu (Harmonikamenu)
En meget smart udførelse af harmonika-menuprincippet - trænger dog til lidt finjustering.

E-mail nyhedsbrev

Vælg normal præsentation

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