[Html] Faire un menu de navigation

Bonjour,

Dans ce sujet nous allons voir comment faire un menu de navigation rapide, ou de sommaire.

Nous aurons besoin, du html, pour mettre en forme le texte et du css, pour "décorer" et personnaliser votre menu. Pas de panique si vous maîtrisez pas du tout le css et le html, quand vous devrez compléter les codes, se sera signaler.

Ce menu est compatible pour les forum, comme forumactif et les site web Smile

Bon, revenons à notre menu Smile

Tout d'abord je vous donne les codes Wink

:

Le code html :

Code:: <div id="menu">
<div class="element_menu">
<h3>Titre de votre menu</h3>
<ul>
<li>Lien vers la page désirée</li>
<li>Lien vers la page désirée</li>
<li>Lien vers la page désirée</li>
</ul>

<h3>Titre de votre menu</h3>
<ul>
<li>Lien vers la page désirée</li>
<li>Lien vers la page désirée</li>
<li>Lien vers la page désirée</li>
</ul>
</div>
</div>

Dans ce code vous devez remplacer "Titre de votre menu" par le titre que vous souhaitez lui donnez et "Lien vers la page désirée" par la page que vous voulez qui s'affiche quand vous cliquez dessus. Je vous conseil de mettre un lien texte à l'aide de se code :

Code:: <a href="Lien vers la page désirée">Titre souhaitez du lien</a>

Cette technique permet de "cacher" un lien par le titre désirer.

Maintenant le css. Smile

Pour les forumactif
Pour le css, je vous conseil de l'intégrez dans le code html, en mettant se code entre les balises et :

Code:: <style type="text/css">
Ici vous mettez votre css
</style>

Aussi, je vous conseil de mettre les codes dans un widget, comme ça il s'affichera sur toutes les page Wink

Si vous voulez vous pouvez le mettre sur une page html pour faire un sommaire, dans ce cas la, procédez comme pour un site web. Smile

Normalement si vous le mettez dans un widget, vous n'aurez pas besoin du css, il s'affichera comme le reste du forum Wink

Pour les site web normal, sois vous mettez le css dans le html, sois dans votre fichier .css Smile

Maintenant le "id", qui est "menu" et la class qui est "element_menu".

Le "menu" sert à placer le menu dans la page web, grâce au css. Si vous voulez le mettre en haut à gauche vous allez écrire le code suivant : (les /*....*/ sont des commentaires, vous pouvez les laisser Wink

)

Code:: #menu
{
Float: left; /*Le menu "flottera" en haut à gauche*/
}

Le "left" veut dire "gauche". Si vous le voulez à droite, remplacez le par "right".

Maintenant le "element_menu" sert à donnez la couleur du texte, la couleur de fond et de mettre une image de fond. Voici le code :

Code:: .element_menu
{
Color: #FFFFFF; /*Votre texte sera blanc*/
Background-color: #000000;/*Votre fond sera noir*/
Background-image: url("lien de l'image"); /*Pour mettre une image de fond*/

Border: 2px solid black; /*Pour mettre une bordure de 2 pixel de large, en normal et en noir*/

Vous pouvez mettre vos couleur en anglais, au lieu des couleurs décimal "#000000;", comme je l'ai fait pour la bordure avec la couleur "black".
Remplacez "lien de l'image" par le lien de votre image, se sera l'image de fond. Aussi le "2px" peux être changer, si vous voulez une bordure plus grande, augmentez le nombre "2".

C'est finit, je sais, c'est pas super, mais c'est la base du menu. Si vous voulez des css en plus, ou qu'il y a un problème, n'hésitez pas à postez sur le topic Wink