Utilisés sur de nombreux sites, les menus facilitent considérablement la navigation. Qu’ils soient déroulants comme dans Windows (un clic sur un intitulé affiche des options supplémentaires) ou flottants (contenus dans un cadre
librement déplaçable dans la page Web), ils fonctionnent tous avec JavaScript.Pour autant, nul besoin de connaître les arcanes de ce langage : vous trouverez des menus tout prêts sur de très nombreux sites. Nous avons choisi pour cet exemple celui proposé par le site L’éditeur JavaScript : une
fois le menu défini via une interface simple, il suffit d’en copier le code dans la page HTML.
Planifiez le contenu du menu
Pour notre exemple, nous partons d’une page d’accueil très simple (index.html) renvoyant aux différentes rubriques de notre site, à savoir une page de liens divers (liens.html) ; une page traitant
des jeux de rôle (jdr.html) ; une galerie de photos (galerie.html) et un forum (forum.html).Deux liens supplémentaires permettront en outre de revenir à la page d’accueil (Home) et d’envoyer un courriel à l’auteur. La liste du menu est donc rapidement établie : il reprendra ces six entrées.
Accédez à L’éditeur JavaScript
Affichez le site de L’éditeur JavaScript dans votre navigateur Internet en tapant l’adresse :
www.editeurjavascript.com Cliquez sur la rubrique Tous les scripts (accessible dans la colonne de gauche sur la page principale) puis, dans la page qui apparaît, cliquez
sur Navigation.Dans la liste de scripts qui s’affiche, cliquez sur Menu à déplacer.
Entrez les données du menu
Dans la page qui vient d’apparaître, le script est déjà actif, en exemple. Il s’agit de la palette intitulée Menu que vous pouvez trouver en haut à gauche de la page.Pour commencer, réglez les différentes options de mise en page disponibles dans la section Edition du script afin d’adapter le menu à vos besoins. La partie la plus importante consiste à taper le texte du menu. Dans
notre exemple, notre première entrée est un retour direct sur la page principale. Sous Entrez ici le texte du lien à afficher, indiquez donc, par exemple, Accueil. Sous Entrez ici le chemin de la page à afficher quand
ce lien sera cliqué, tapez le nom du fichier HTML de la page principale, soit index.html.Cliquez ensuite sur le bouton Enregistrer le lien et répétez la man?”uvre pour toutes les entrées du menu.
Générez et enregistrez le script
Cliquez sur Editer votre script! Juste en dessous, apparaissent des lignes de code dans les deux zones de texte jusque-là vides. Cliquez avec le bouton droit de la souris sur la première zone et, dans le menu
contextuel, choisissez Tout sélectionner.Cliquez de nouveau avec le bouton droit de la souris et choisissez cette fois Copier. Ouvrez le bloc-notes de Windows et, dans le menu Edition, cliquez sur Coller : le code JavaScript
apparaît maintenant dans le bloc-notes. Enregistrez-le dans le même dossier que le fichier index.html, en le nommant (très précisément) ejs_menu_mob.js.
Intégrez le menu à vos pages
Sélectionnez maintenant le contenu de la seconde zone de texte et copiez-le comme précédemment dans le presse-papiers de Windows. Ouvrez le fichier index.html dans NVU et cliquez sur l’onglet
Source, en bas de la fenêtre principale.Repérez la chaîne de caractères
, près du début du fichier. Cliquez avec le bouton droit de la souris juste derrière le caractère > et sélectionnez Coller dans le menu qui
apparaît. Le code est inséré dans la page.Sauvegardez votre page puis recommencez l’opération pour chacune des pages HTML dans laquelle vous souhaitez intégrer le menu.Quand c’est fait, rouvrez le fichier index.html dans NVU et cliquez sur le bouton Navigateur de la barre d’outils principale. Votre navigateur Internet affiche alors votre page d’accueil. Votre menu
doit y figurer : testez-le simplement en le déplaçant à votre guise et en cliquant sur les différents liens qu’il propose.
Mettez vos fichiers à jour chez votre hébergeur
Il ne reste plus qu’à envoyer vos fichiers HTML, agrémentés de leur menu, sur le serveur de votre hébergeur. Utilisez pour cela votre logiciel de FTP habituel ou, si vous utilisez NVU, cliquez sur le bouton Publier.
Les informations d’accès au site de votre hébergeur vous seront demandées. Envoyez alors les fichiers HTML et les images de votre site, sans oublier le fichier ejs_menu_mob.js précédemment créé.
🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.
