Een navigatie is het hart van een website en je zou er toch alles voor over hebben om dit onderdeel zo goed mogelijk uit te werken. Stap voor stap leer je hoe je een flexibele navigatie kan maken die toegankelijk is voor de meeste internetbrowsers.

Technieken waar we gebruik van zullen maken en waar basiskennis een pluspunt is:

• HTML
• JavaScript (MooTools)
• CSS

Er zijn enkele struikelblokken waar we best rekening mee moeten houden alvorens te starten. Zo zou het kunnen dat de bezoeker JavaScript uit heeft staan of een verouderde browser gebruikt. Dit gaan we proberen op te lossen met Graceful Degradation.

1. Let's roll

We beginnen met het maken van de navigatiestructuur in de vorm van een unordered list met links. Geef de overkoepelende

• home
• over ons
  • Inventis
  • Het team
• diensten
  • E-mail marketing
  • Fotografie
• aanpak
  • Visie
  • Werkwijze
  • Technologieën

Als bovenstaande html klaar is gaan we verder met de CSS opmaak van ons menu. Eerst resetten we alle padding en margins op onze lists, daarna wat visuele styling, kleurtjes en positionering.

ul#navigation, ul#navigation ul{ margin:0; padding:0; }
/* blauwe achtergrondkleur, horizontaal plaatsen, rechtermarge, bullets verwijderen */
ul#navigation li{ background:#0173C6; float:left; margin:0 5px 0 0; list-style:none; }
/* block element, padding, onderlijning verwijderen */
ul#navigation li a{ display:block; padding:3px 5px; text-decoration:none; }
/* absolute positioneren, overflow niet zichtbaar zetten */
ul#navigation li ul{ position:absolute; overflow:hidden; display:none; }

Het resultaat mag er al zijn zoals je kan zien in de eerste demo, echter zijn de navigatie items op het 2e niveau nog niet bereikbaar. Daar gaan we nu voor zorgen.

2. It's not over yet!

We gaan er meestal van uit dat alle bezoekers JavaScript ondersteuning hebben, maar dit is niet altijd het geval. Gebruikers moeten echter steeds kunnen navigeren op een website, ook indien ze JavaScript uit hebben staan..

Met het toevoegen van volgende CSS code bereiken we basisfunctionaliteit voor het submenu, als je over een hoofditem gaat wordt het subitem getoond. Echter wel zonder fancy effecten, daar komen we dadelijk.

/* lichtblauwe achtergrond, breedte van 100px breed, left floats verwijderen */
ul#navigation li ul li{ background:#2b8fd8; width:100px; clear:left; }
/* block element, height is nodig voor mensen die javascript uit hebben staan */
ul#navigation li:hover ul{ display:block; height: auto; }

Nu is het tijd om wat animatie effecten toe te voegen.

Eerst en vooral moet je de Mootools library laden. MooTools is een uiterst krachtig en vrij licht JavaScript Framework (63kb) dat je snel onder die knie hebt. De website van MooTools bevat duidelijke documentatie, ook zijn er verschillende community's en vele demo's.

Plaats daarna volgende code in de tag van je pagina.:

var fireOn = window.ie ? 'load' : 'domready';
window.addEvent(fireOn, function(){

    var navigation = $$('ul#navigation li');
    var FxDuration = '400';
    var FxTransition = 'sine:out';
    var listItemHeight = 24;

    navigation.each(function(el){
        var submenu = el.getElement('ul');
        var myEffect = new Fx.Morph(submenu, {duration: FxDuration, transition: FxTransition});

        // Check if the element has a submenu..
        if(submenu){
            submenu.setStyle('height','0');
            var OuterLink = el.getElement('a');
            var height = (listItemHeight * submenu.getElements('li').length);

            // Attach some events to the first anchor
            OuterLink.addEvent('mouseover', function(e){
                if(!this.hasClass('active')){
                    this.addClass('active');

                    submenu.setStyle('display','block');

                    myEffect.cancel();
                    myEffect.start({
                        'height': [0, height]
                    });
                }
            });

            // Attach some events to the submenu
            el.addEvent('mouseleave', function(e){
                myEffect.cancel();
                myEffect.start({
                    'height': [myEffect.subject.style.height, 0]
                });
            });

            myEffect.addEvent('complete', function() {
                if(myEffect.subject.getStyle('height') == "0px"){
                    submenu.setStyle('display','none');
                    OuterLink.removeClass('active');
                }
            });
        }
    });
});

Bovenstaande code zal wellicht voor enkele van jullie op 中国文字 lijken. Vandaar dat ik voor het afsluiten van mijn eerste blogpost nog een woordje uitleg geef.

De eerste regel var fireOn gebruiken we om te controleren of we met een versie van Internet Explorer te maken hebben of een met een moderne browser die overweg kan met het domready event. Internet Explorer geeft soms onverklaarbare problemen met het domready event waardoor je code soms niet uitgevoerd wordt.

Een paar regeltjes lager hebben we 4 optionele instellingen die we naar eigen keuze kunnen aanpassen var navigation, FxDuration, FxTransition, listItemHeight.

• var navigation is een selector vergelijkbaar met CSS-selectors. Hier gebruik je ondermeer het ID dat je aan je
  gegeven hebt in de eerste stap van dit artikel.
  • var FxDuration is de lengte van de animatie op het submenu. Deze wordt opgegeven in milliseconden.
  • Met var FxTransition bepaal je welk animatie effect je op je dropdown toepast.
  • En als laatste heb je var listItemHeight dit is de hoogte van de list items in je submenu waar we nadien berekeningen op doen.

  Bekijk nog even het resultaat in de 2e demo om het afgewerkte resultaat te zien. De 3e demo toont wat gebruikers te zien krijgen indien ze geen JavaScript hebben ingeschakeld.

  Inventis heeft in enkele recentere projecten gebruik gemaakt van het JavaScript Framework MooTools voor het maken van dropdowns:

  • Belisol
  • Radio Soulwaxmas
  • ...