Ce code permet de personnaliser un menu plus au moins original qu’une simple liste de lien. Vous pouvez l’utilisez en tant que module sur un message d’une page d’accueil ou un module pour votre site.

 

♦ Voici le code html du menu personnalisé, veuillez à modifier les liens et les noms des menus afin de l’adapter pour votre site.

<table class=”cadremenu”><tr><td ><center><div class=”titremenu”>NAVIGATION</div>
<a href=”LIEN DU MENU #01″ class=”menu”>MENU #01</a><br>
<a href=”LIEN DU MENU #02″ class=”menu”>MENU #02</a><br>
<a href=”LIEN DU MENU #03″ class=”menu”>MENU #03</a><br>
<a href=”LIEN DU MENU #04″ class=”menu”>MENU #04</a><br>
<a href=”LIEN DU MENU #05″ class=”menu”>MENU #05</a><br>
<a href=”LIEN DU MENU #06″ class=”menu”>MENU #06</a><br>
</center></td></tr></table>

♦ Dirigez-vous maintenant dans Affichages > Couleurs > Général > Feuille de Style CSS pour les forums “ForumActif” ou votre fichier style.css de votre site.
♦ Installez ce code en modifiant les caractères en majuscule comme : #COULEUR

/* MENU
…………………………………….*/

.cadremenu{
background-color: #COULEUR; /*couleur du fond du cadre du tableau*/
border: 3px solid #COULEUR; /*couleur de la bordure du tableau qui doit etre identique que ci-dessus*/
}

.titremenu{
color: #COULEUR; /*couleur du titre*/
font-family: Times New Roman; /*police des liens*/
font-size: 12px ;/*taille du texte*/
text-align: center; /*alignement des liens */
border-bottom : 2px solid #COULEUR; /*couleur du soulignement du titre*/
}

.menu {
color: #COULEUR; /*couleur des liens*/
font-size: 10px; /*taille des liens*/
font-family: verdana; /*police des liens*/
text-align: center; /*alignement des liens */
background-color: #COULEUR; /*couleur du fond des menus qui doit être identique que ceux du cadremenu*/
border: 2px solid #COULEUR; /*couleur de la bordure des menus qui doit être identique que ceux du cadremenu*/
padding-top: 5px; /*marge interne en haut*/
padding-bottom: 5px; /*marge interne en bas*/
padding-left: 10px; /*marge interne à gauche*/
padding-right: 10px; /*marge interne à droite*/
width:150px ; /*largeur des menu*/
display:inline-block; /*défini un comportement “bloc”*/
}

.menu:hover {
color: #COULEUR; /*couleur des liens survolés*/
font-size: 10px;
font-family: verdana;
text-align: center;
background-image: url(“URL DE VOTRE IMAGE”);  /*image de fond si vous souhaitez ne pas avoir de fond uni lors du survole de la souris*/
background-color: #COULEUR; /*couleur du fond des menus lors la souris survole celui-ci*/
border: 2px solid #COULEUR ;/*couleur de la bordure des menus qui doit être identique que ceux du cadremenu*/
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
width:150px;
display:inline-block;
}

/* LIEN EN MINI-MAJUSCULE
…………………………………….*/

a {
font-variant: small-caps;
}

a:link,a:active,a:visited {
font-variant: small-caps;
text-decoration: none !important;
 }

a:hover{
font-variant: small-caps;
text-decoration: none !important;
}

♦ Et enregistrez. !

 Merci de me créditer pour l’utilisation de ce libre-service. Il est interdit de le re publier ailleurs qu’ici sans mon autorisation !

© By Shaynee

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *