Avantages :
- compatibilité maximale (même si JS n'est pas activé)
- correspond au même événement sur desktop (clic) et sur mobile (touch / clic)
- on peut refermer simplement le menu sur mobile en recliquant sur le bouton
- on peut facilement cibler n’importe quel élément de la page
- permet plusieurs sous-niveaux de menu
- lorsque JavaScript est désactivé, le menu reste ouvert
Inconvénients :
- nécessite un traitement JavaScript par le navigateur
- on discerne un temps de latence durant lequel le menu est affiché ouvert
- nécessite souvent d'implémenter des fonctionnalités / détections complémentaires qui complexifient le code initial (onresize, timeout, zoom utilisateur, etc.)
Compatibilité :
- OK sur ordinateurs de bureau (IE10 minimum)
- OK sur mobile : iOS 5+, Android 3+, Opera Mobile, Blackberry 6+, IE 10+, Firefox, Chrome, Opera mini (menu ouvert), OK sur Android 2.* (menu ouvert)
- OK avec le lecteur d'écran VoiceOver
Le code JavaScript utilisé :
if (window.innerWidth<768) {
t = document.getElementById('navigation');
if(t) {
t.classList.toggle('nav-opened');
t.onclick=function(){ t.classList.toggle('nav-opened');}
}
}
Lorem Elsass ipsum réchime amet non Choucroute knack tchao bissame hopla. Wotch a kofee avec ton BibalaekaesSalat et ta wurscht ?
Yeuh non che suis au réchime, je ne mange plus que des Grumbeere light et che fais de la chym avec Chulien. Tiens, un Picon sur le comptoir.
Hopla vous savez que la mamsell Huguette, la miss Miss Dahlias du messti de Bischheim était au Christkindelsmärik en compagnie de Richard Schirmeck (celui qui a un blottkopf), le mari de Chulia Roberstau, qui lui trempait sa Nüdle dans sa Schneck ! Yo dû, Pfourtz ! Ch'espère qu'ils avaient du Kabinetpapier, Gal !
Allez tchao bissame !