Créez un menu avec des puces à l’aide d’un élément html

La team WebAcappella vous propose aujourd’hui une nouvelle astuce qui vous permettra de créer facilement un menu avec des puces à l’aide d’un élément html. Il pourra servir aussi bien de lien vers des pages de votre site, que de lien vers d’autres sites internet ou encore de lien vers un fichier à télécharger depuis votre espace distant (ex : un fichier pdf…)

Menu-puces-htmlLes petits plus de ce menu ? Il est flottant, c’est à dire, il descend en même temps que le visiteur de votre site lit votre page (une astuce donnée par un de nos utilisateurs, merci Kezaco !) et la couleur des liens change au survol de la souris.
Alors, allons voir ça de plus près !

Insérer un code HTML

Ouvrez la page de votre choix où vous souhaitez intégrer le menu. Cela peut être n’importe quelle page de votre site ou même votre maquette (le menu sera visible alors sur toutes les pages de votre site).

ElementHTMLC’est dans le menu « Insérer » que vous trouverez l’élément « Code html ». A l’aide de cet outil vous pouvez insérer du code html à n’importe quel endroit de votre site. Pratique, non ?

Insérez un élément html, placez-le où vous voulez sur votre page, puis dans le cadre de l’inspecteur de propriétés copiez/collez l’exemple de code suivant :

<div id="MENU" style="position:fixed; float:left">

<ul id="onglets" style="font-family:arial;color:#ED7F10;font-size:22px"> WebAcappella
<ul style="list-style-type:square">
  <li><a href="http://www.webacappella.fr"onmouseover="this.style.color='#677179'" onmouseout="this.style.color='#ED7F10'"style="font-family:arial;color:#ED7F10;font-size:18px"> Accueil </a></li>
  <li><a href="http://www.webacappella.fr/features_fr.html"onmouseover="this.style.color='#677179'" onmouseout="this.style.color='#ED7F10'"style="font-family:arial;color:#ED7F10;font-size:18px"> Produit </a></li>
  <li><a href="http://www.webacappella.fr/buy_product_fr.html"onmouseover="this.style.color='#677179'" onmouseout="this.style.color='#ED7F10'"style="font-family:arial;color:#ED7F10;font-size:18px"> Acheter </a></li>
  <li><a href="http://www.webacappella.fr/about_fr.html"onmouseover="this.style.color='#677179'" onmouseout="this.style.color='#ED7F10'"style="font-family:arial;color:#ED7F10;font-size:18px">  A propos </a></li>
  <li><a href="http://www.webacappella.fr/help_fr.html"onmouseover="this.style.color='#677179'" onmouseout="this.style.color='#ED7F10'"style="font-family:arial;color:#ED7F10;font-size:18px"> Aide </a></li>
</ul>
</div>

Personnaliser le menu

Pour personnaliser votre menu, direction les propriétés du texte. Pour changer l’intitulé du menu placez-vous sur la ligne 3 du code. Vous pouvez changer : la typo (font-family), la couleur (color), la taille en pixels (font-size) et bien sûr le texte lui même (remplacez le mot WebAcappella par votre propre texte).

De la ligne 5 à la ligne 9 vous pouvez personnaliser les éléments de la liste. Ainsi modifiez les liens (a href), la couleur du lien au survol (onmouseover), la couleur du lien une fois que le curseur de la souris quite le lien (onmouseout) et aussi les propriétés du texte (déjà expliquées dans le paragraphe précédent).

Sachez qu’il est aussi possible de changer la forme des puces. Ainsi, dans la ligne 4 vous pourrez remplacer le mot square par « circle », « disc » ou même « none » si vous ne souhaitez pas avoir de puces.

En fin, pour trouver les couleurs que vous aimez rendez-vous sur ce site (en bas de page) : http://www.jokconcept.net/codes-couleurs-hexdecimal.php.

Alors à vous de jouer !

4 Comments

  1. noobactu

    Merci beaucoup pour cette information mais j’attend avec impatience le box office 😉

  2. kezaco

    Ah ah, je vois que ça vous a servi ! Merci 😉

  3. redacteur web

    SALUT

    génial ce logiciel ça nous facilite plus le travail et nos apprentissages.

Commentaires fermés