Webdesign 101 » Navigation » Grundlæggende

HTML og Java Applet menuer

På de to foregående sider om dette emne - navigationssystemer, indlejret på de enkelte sider (og altså uden brug af rammer (frames)) - har vi benyttet os af såkaldte menu bars, menubjælker, der typisk er indlejret i toppen og/el bunden af hver side.

Et af problemerne ved denne teknik er tværformatet, der betyder, at der er en grænse for, hvor mange links der kan indføjes i en sådan menu bar uden at det bliver uoverskueligt.

Har du mange links, er det derfor attraktivt at overveje at stille menu bar'en lodret, som det er vist på denne side:

Demoside
Indhold
Footer

Det har selvfølgelig den ulempe, at der er en grænse for, hvor lange ordene kan være... Men heller ikke som websmed kan du få alle ønsker opfyldt (endnu - lad os kigge på dette problem når vi kommer til Dynamisk HTML)

Måden at gøre det på er at lave en i virkeligheden meget simpel tabel, der indrammer hele dokumentet og som indeholder de viste celler.

Der er her lavet det "raffinement", at menuen er ekspanderet for den aktuelle sektion, som er Navigation.

Forestiller vi os, at vi gjorde dette for alle sektionernes vedkommende, ville vi få virkelig mange links på siden, og den ville blive ganske høj, og måske ret uoverskuelig.

Det smarte her er at lave menucellens indhold forskelligt fra sektion til sektion, dvs. ekspandere menuen for Artikler, Javascript og Farver og Grafik, hvis der blev klikket på et af disse hovedpunkter.

Menuen i dette eksempel er ganske simpel. Der er rige muligheder for at anvende grafik, rullende grafik (Se eksemplet under JavaScript Rollovers), elegante tekstformateringer (her er brugt en definition list - dl) o.m.a.

Harmonika-menuer

Selvom de oftest set anvendt i rammebaserede navigationssystemer, er der et stort antal navigationsystemer "på markedet", der uden videre vrøvl kan integreres i dokumenter som det ovenfor viste som frembringer, hvad jeg kalder en "harmonika-" eller "folde-ud" effekt

En "folde-ud" effekt er den effekt, der opnås, dersom f.eks. alle underpunkterne til hovedpunktet Navigation her til venstre - og til de andre punkter - blev synlige, når musen blev ført hen over hovcedpunktet, eller der blev klikket på hovedpunktet.

Harmonika-effekten gør, at du kan have et usandsynligt stort antal menupunkter presset sammen på det forholdsvis lille areal, fordi brugeren kun ser en lille del af dem ad gangen. Men links til alle dine dokumenter ligger faktisk kun et museklik væk.

Problemet med disse menusystemer er, at den "ægte" harmonika-effekt kun fungerer i 4. generations browsere, og det er derfor nødvendigt at teste systemet i en ældre browser for at se, hvad der "forsvinder", og dernæst skrive noget kode, der repræsenterer en alternativ navigationsmulighed for brugere med ældre browsere.

Et du forliebt i harmonika-menuer (som jeg er), kan du (i teorien) undgå den sidstnævnte komplikation ved at anvende en Java Applet i stedet for JavaScript. Der findes mange endog meget elegante menusystemer som Java Applets.

Problemerne med disse er så

  1. De Java Applets, som er til noget, koster penge, og
  2. Uanset teorien kan ikke alle systemer håndtere Java Applets, og
  3. De systemer der kan, er ofte meget længe om at downloade og ikke mindst eksekvere applet'en.

http://www.hernhs.dk/ er et eksempel på en sådan Applet.

Valget er dit

Hvis du er nået hertil, er det sikkert gået op for dig, at heller ikke webdesign foregår efter faste regler for, hvordan man løser denne eller hin opgave. Du skal træffe nogle valg. Hvad du vælger, må først og fremmest basere sig på den konkrete opgave, på en klar fornemmelse af fordele og ulemper ved de forskellige løsningsmuligheder og - til sidst - dine personlige præferencer. (Og så måske de personlige præferencer hos din opdragsgiver...)

Alt andet lige vil jeg imidlertid opfordre dig til at sætte dig noget ind i Javascript "harmonika"-menuerne. Det forekommer mig overordentlig attraktivt at have mulighed for i et eneste skærmbillede at give en gæst et fuldstændigt overblik over samtlige dokumenter på et websted - uden at gæsten straks, siden er indlæst, bliver overfaldet af uoverskuelige informationsmængder.

Disse menusystemer kan anvendes uanset om du bruger frames eller sideindlejrede menuer. De findes en stor mængde i public domain. En del af dem ser du eksempler på her på dette site.

Løsningen på problemet med, at disse menuer (hvis det er Javascript) stort set kun fungerer i 4. generationsbrowsere, kan du f.eks. løse ved at bruge både Javascript og Java Applet. Vælger du to systemer, der ligner hinanden, er det ekstra arbejde, der bliver tale om, indskrænket til at vedligeholde 2 eller 3 filer - og altså ikke mange sider.

Ren HTML?

Udviklingen af de muligheder, du har som webdesigner, går så forrygende stærkt, at der så godt som altid findes et teknisk svar på dine problemer endnu før du bliver klar over, at du har dem.

Det betyder (desværre?), at webdesignere ofte (undertegnede ikke undtaget) foretrækker at lære sig noget ny teknologi for at løse et problem, fremfor at undersøge, om den lidt ældre teknologi alligevel er god nok.

Løsninger, baseret på HTML 3.2, har den fordel, at de dækker en langt bredere del af browserspektret end løsninger, der er baseret på nyere teknologi som f.eks. HTML 4, Javascript version 1.2 og Cascading Stylesheets.

I relation til den specifikke problemstilling har jeg undersøgt, at det faktisk kan lade sig gøre at udvikle et "harmonika"-menusystem baseret på HTML 2 og med minimal anvendelse af Javascript. Det, der resterer, er såmænd blot at gøre det.

Men som de fleste andre webdesignere er jeg alt for optaget af de nye teknologier til at ofre tiden på at færdigudvikle et sådant system...!

"Uægte" folde-ud menuer

Jeg har ovenfor skrevet, at "ægte" harmonika-menuer kun kan lade sig vise i 4. generationsbrowsere.

Det er en sandhed med modifikationer. Der er faktisk lavet en del folde-ud menuer, der udmærket kan vises i 3. generations browsere (Netscape 3 og Internet Explorer 3).

Der er det problem med disse - i hvert fald de løsninger, der opererer med 3 eller flere niveauer - at der er tale om enormt komplicerede og derfor vanskeligt gennemskuelige scripts. Det gør det ret vanskeligt at tilrette sådanne "købe"-løsninger til ens egne aktuelle behov.

 

Brug ikke eksemplerne

Menuerne på denne side er kun eksempler, så du kan ikke forvente, at de virker.

E-mail nyhedsbrev

Vælg normal præsentation

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