Catégories
FCS FCS1-cours

Insertion d’un menu avec Luxbar

Pour finaliser la production d’un site simple créé à partir de la rédaction structurée d’un article, je vous propose maintenant d’insérer en tête de page un menu fixe.

Chacun dispose désormais d’un dossier de site dans lequel se trouvent :

  • le fichier index.html,
  • le dossier css contenant les 4 feuilles de styles utilisables (même si la seule feuille de style utilisée est absolument nécessaire)
  • le dossier img contenant les images collectées (même si là aussi, seule l’image intégrée dans la page soit nécessaire)

➜ Pour insérer un menu fixe, nous allons utiliser l’application Web Luxbar. Celle-ci génère le code HTML dont nous avons besoin.

Préparation

Le code proposé par l’appli Luxbar est opérationnel dans la mesure ou la feuille de style correspondante est disponible dans le dossier du site.

➜ Il est donc nécessaire de télécharger la feuille de style “luxbar.css” puis de la placer dans le dossier “css” du site.

Paramétrer Luxbar

Il s’agit maintenant d’utiliser l’application Luxbar pour générer le code HTML du menu.

interface de l'application Luxbar

Inutile de télécharger l’appli Web (comme cela vous est proposé en début de page. Tous les réglages s’effectuent directement sur la page de l’application. Il suffit de cocher les options souhaitées. Quoiqu’il en soit, tout est modifiable dans le code ultérieurement.

Choix du nombre d’onglets

➜ Le nombre d’onglets dépend à priori du nombre de sous-titre h2, auquel il faut ajouter un onglet “Accueil”, pour revenir en haut de page quand on en a besoin.

Choix de la position du menu et de sa couleur

➜ Je vous invite à choisir la position “Fixed”. En effet, elle se révèle la plus intuitive et la plus pratique sur tous les écrans.

Sur la capture d’écran, j’ai coché “Fixed Bottom” pour des raisons pratiques de positionnement des commentaires 😉

Choix des modalités d’affichage dans la barre de navigation

➜ Choisissez ici les options qui vous conviennent le mieux.

L’option d’animation du hamburger concerne l’icône des 3 traits superposés qui s’affiche pour accéder au menu quand l’écran ou la fenêtre de navigation est de petite taille.

Paramétrer le code HTML du menu

Une fois les options choisies, l’application Luxbar vous propose de copier dans votre code source une série de lignes HTML (un bouton “Copy” apparait au survol du code).

➜ Copiez le code HTML proposé et collez-le dans le code source de votre page Web (index.html) en changeant le nom du conteneur du menu. Choisissez la balise <nav> à la place de la balise <header>.

Établir les liens avec la page dans le code du menu

Sur la capture d’écran précédente, j’indique que des changements doivent être effectués dans le code HTML du menu Luxbar. En effet, il s’agit d’établir un lien entre chaque onglet et l’endroit de la page vers lequel l’onglet est sensé pointer.

Pour installer proprement un menu Luxbar avec les styles que je vous ai proposé, il est nécessaire de procéder à des améliorations dans le code HTML et dans les CSS.

➜ Téléchargez les CSS adaptées et placez-les dans le dossier “css”. Ensuite, appelez celle qui vous convient via la balise <link>, dans le head de votre site.

➜ Mettez en place les bandeaux qui vont permettre aux titres <h2> de s’afficher sous la barre de menu. Positionnez ensuite les différents id (ancres de navigation) dans les <div class= »bandeau »> (voir l’exemple donné dans la capture d’écran précédente).

Pour que les feuilles de style adaptées au menu Luxbar puissent s’appliquer correctement à votre page HTML, il est nécessaire de créer de créer 2 boîtes (divisions) importantes :

  • une boite <main></main>
  • une boîte <footer></footer>

La boîte <main></main> englobera les contenus principaux (h1 – p – h2 – p – p – etc.). Dans notre cas, elle sera chapeautée par la boîte <nav></nav> contenant le menu et elle sera suivie de la boîte <footer></footer> contenant des informations annexes sur le site et ses contenus.


Je vous propose de télécharger un exemple de réalisation similaire pour voir quels sont précisément les attendus à ce stade des opérations 😉

Vous pouvez consulter le site exemple à cette adresse : http://graphizm.fr/fcs/exemples-realisations/pollution-numerique. Notez que ce site n’est pas optimisé pour le référencement naturel.

Par Yves Goguely

Formateur au GRETA Clermont-Auvergne