Tout Sur l'Informatique & Blabla -TSI


AccueilAccueil  PortailPortail  Partenaires  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Navigation
Derniers sujets
» Présentation et recherche
Jeu 19 Mar - 2:23 par Error

» Error, pour vous servir !
Jeu 5 Mar - 0:35 par Error

» Call of Duty
Ven 24 Oct - 3:06 par DarkVatorica

» [Html] Les codes pour donner des effets sur le texte
Sam 21 Juin - 13:29 par Dada

» Présentation de Dada
Sam 21 Juin - 13:27 par Dada

» Rot68
Mar 3 Déc - 9:39 par Rot68

Qui est en ligne ?
Il y a en tout 3 utilisateurs en ligne :: 0 Enregistré, 0 Invisible et 3 Invités :: 1 Moteur de recherche

Aucun

Le record du nombre d'utilisateurs en ligne est de 48 le Mer 11 Sep - 21:35

Sujet : « [Html] Faire un menu de navigation »

Rafraichir
 Kernelov Voir le profil de l'utilisateur Mer 19 Aoû - 8:55
Bonjour, Smile

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
Sujet : « [Html] Faire un menu de navigation »