mhaList
Generelt | Demonstration | Væsentlige ting | Kompatibel | Opsætning ( HTML | Javascript | CSS | Billeder ) HistorikGenerelt
mhaList er et clientside javascript der kan vise en liste enten som et foldud træ eller som en meget simpel faldned menu.
mhaList er let at integrere og sikre at din hjemmeside forbliver kompatibel med søgemaskiner, samtidig med at den nedgraderer pænt i ældre browsere eller når css og javascript er slået fra.
Foldud træet udvides og kollapses dynamisk interaktivt af brugeren, og giver et simpelt og intuitivt navigation system.
Faldned menuen viser og skjuler menuens underpunkter, når brugeren fører musen henover menupunkterne.
Demonstration
Nedenfor kan du se eksempler på mhaList, både som foldud træ og faldned menu.
- mhaList som foldud træ med ikoner
- mhaList som foldud træ uden ikoner og cache
- mhaList som faldned menu horisontalt
- mhaList som faldned menu vertikalt
- mhaList uden javascript og css
Væsentlige ting
-
Nedgradere pænt
Data for mhaList ligger i HTML-dokumentet som en uordnet liste vha. <ul> og <li> elementerne. Derved kan den altid vises, i ældre browsere (NS4, IE4 og Op6) eller hvis JavaScript er slået fra, som en almindelig statisk liste, hvor alle punkterne er åbne. Hvor mange andre javascript menuer enten ikke er funktionsdygtige eller vises ikke. -
Vedvarende tilstand
mhaList foldud træet forbliver åben eller lukket som brugeren navigere rundt på siden. mhaList bruger cookies til at huske foldud træets tilstand og genskaber den automatisk på den næste side. -
Ubegrænset niveauer
Med mhaList kan du lave ubegrænset antal niveauer i menuen, kun indskrænket af det tildelte menu område på din hjemmeside. -
Brugerdefineret ikoner
mhaList tillader at du brugerdefinere foldud træet grafik, for de generelle menupunkter samt for åbne og lukket menupunkter. -
Fuld kontrol
Med mhaList er det muligt at angive om et menupunkt altid skal være åben eller lukket. -
Søgemaskine venlig
Fordi data til mhaList ligger i HTML-dokumentet, kan søgemaskiner finde linksne i menuen. Javascript genereret links, som ofte ses i andre menuer, kan ikke ses af søgemaskiner. -
Overholder standarderne
mhaList overholder W3C-standarderne for XHTML1.0 og CSS.
Kompatibel
mhaList er designet til nutidens browsere, som understøtter W3C-standarderne. Den er fuldt funktionsdygtig fra og med Internet Explorer 5 både på Windows og Mac, Opera 7, Safari på Mac og Mozilla baseret browsere såsom Netscape 6+, Camino og Firebird. Yderligere vil den være brugbar (dog ikke interaktiv) på ældre eller mindre standardiseret browsere såsom Netscape 4, Explorer 4 og Opera 6.
| Browser | Virker dynamisk | Nedgradere pænt | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Oversigt over kompatibilitet i forskellige browsere for mhaList. | ||||||||||
| Explorer 5+ (Win32 / Mac) |  |
|||||||||
| Mozilla-baseret browsere |  |
|||||||||
| Netscape 6+ (Mozilla) |  |
|||||||||
| Opera 7 |  |
|||||||||
| Safari (Mac) |  |
|||||||||
| Konqueror |  |
|||||||||
| Andre DOM2 browsere | DOM2 | |||||||||
| Explorer 4 |  |
|||||||||
| Netscape 4 |  |
|||||||||
| Opera 6 |  |
|||||||||
| Andre DOM1/0 browsere | DOM1/0 | |||||||||
Note:Har du en browser, hvor scriptet afviger fra ovenstående, så send mig venligst en e-mail med browser, version samt OS (evt. om du har javascript/cookies slået til/fra).
Opsætning
For at bygge din mhaList skal du bruge mindst 2 filer: En javascript-fil (mhalist.js) og et HTML-dokument (example.html) med selve data for træet, som du selv laver. Der udover vil du sikkert også gerne have et stylesheet (mhalist.css) for at refinere designet af træet. Derudover er der også lavet en specielt stylesheet til MSIE5.0 og MSIE5.5 (mhalist_IE5x.css), da disse 2 browser har lidt problemer med CSS'en til faldned menuen.
HTML
Det første du gør er at oprette et HTML-dokument med en gyldig DOCTYPE. Her i indsætter du en liste af nested <ul> og <li> elementer som udgør strukturen af dit træ. Hver <li> list-element indeholde et <a> anker med en href til en fil.
Her er et eksempel på et foldud træ:
<ul id="myTree" class="ListTree">
<li><a href="menu1.htm">Menu 1</a>
<ul class="open">
<li><a href="menu11.htm">Menu 1.1</a>
<ul class="closed">
<li><a href="menu111.htm">Menu 1.1.1</a></li>
<li><a href="menu112.htm">Menu 1.1.2</a></li>
</ul>
</li>
<li><a href="menu11.htm">Menu 1.2</a></li>
</ul>
</li>
</ul>
Listen skal på sit første ul-element have et unikt id, her myTree. Den skal ligeledes have en class som fortæller om det er et træ (ListTree) eller en menu (ListMenu).
For ListTree kan den ligeledes have et optionelt noIcons class, som indikere om træet skal vises med ikoner. Class'en noCache slår den vedvarende tilstand fra. På ul-elementerne er det muligt at angive class'en open og closed, som sørger for at det punkt altid er åbent/lukket.
For ListMenu er der hverken noIcons, noCache eller open og closed class'erne. I stedet skal man angive om menu'ens første punkter skal være placeret vertikalt eller horisontalt, med class'erne vertical og horizontal.
Javascript
I HTML-koden efter listen indsætter du en javascript blok som bygger selve menuen eller træet.
Her er et eksempel på javascript'et:
<script type="text/javascript"><!--
if (typeof(ml) != "undefined") {
var oList = new ml.buildList('myTree');
}
//--></script>If-sætningen finder ud af om javascript-filen (mhalist.js) er load'et. I funktionen ml.buildList testes der på de DOM-metoder som skal bruges til mhaList, hvis browseren forstår dem oprettes træet eller menuen ellers gøres intet og listen vises som en almindelig statisk liste.
NB: myTree i javascriptet er et ID på listen og skal passe overens med ID'et på det første UL-element i listen.
I variablen ml.cfg (mhalist.js linie 14) opsættes default ikonerne for menupunkter der kan udvides/kollapses samt almindelige punkter.
CSS
Som med alle andre HTML-dokumenter, kan du via CSS ændre præsentationen af HTML-koden. Udover HTML-elementerne har mhaList også en CLASS og ID attribut så du nemt kan ændre udseendet af dit mhaList.
Billeder
De forskellige ikoner som bliver brugt til mhaList kan du hente her:
Faldned menuen benytter dette ikon
(
)
til at indikere at der er et underpunkt
og ved horisontal menu benyttes dette
(
)
på de første menupunkter.
Foldud træet benytter disse ikoner til at indikere om træet kan udvides
(
) eller
kollapses
(
)
og dette ikon
(
)
hvis der ikke findes underpunkter.
Historik
(2003.11.25) version 1.0 - mhaListMenu er forbedret med mouseover effekt i stedet for klik. Ændret Javascript kaldet for opbygningen af mhaList og nye navne til class'erne.
(2003.09.21) version 0.9 - Tilføjet mhaListMenu som er en dropdown/faldned menu i ét niveau. Udvidelser til mhaListTree så den kan vises med og uden ikoner, samt mulighed for at angive om en node altid skal være åben eller lukket.
(2003.05.19) version 0.8 - Performance optimeret koden til MSIE, ved at fjerne kaldet af ml.FindLists fra onload og istedet kalde funktionen ml.BuildListTree lige efter selve listen.
(2002.11.14) version 0.7 - Der er lavet 2 ændringer, så mhaList nu også virker i Opera 7.
Opera 7 understøtter ikke window.addEventListener, så den er ændret
til document.addEventListener.
Opera skjuler ikke prikkerne i listen hvis man samler type, position og imaget i en
list-style: none inside none;,
men det virker fint hvis man adskiller dem
list-style-type: none;
list-style-position: inside;
list-style-image: none;
(2002.06.25) version 0.6 - Efter at have læst artiklen på 13thparallel om Designing for Portability - the ulitima of namespacing, besluttet jeg at lave en lille opdatering af min mhaListTree kode. Udover namespaces benyttes der nu en class frem for et unikt id, således at det er muligt at have mere end en mhaList på samme side. De skal blot have et unikt ID hver. Den er ligeledes også gjort parat til mit næste projekt mhaListMenu. På grund af den kommende mulighed for både et tree og en menu har den også fået et nyt navn mhaList.