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><br>
<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

/* CADRE DU MENU
————————————————*/

.cadremenu {
background-color: #COULEUR; /*couleur du fond du cadre du tableau qui sera de la même couleur de les bordures du menu*/
}

/* TITRE DU MENU
————————————————*/

.titremenu {
color: #COULEUR; /*couleur du titre qui sera la même que les bordures*/
font-family: verdana;
font-size: 9px;
font-weight: bold ;
text-align: center;
background-color: #COULEUR; /*couleur du fond*/
border-right: 5px solid #COULEUR; /*couleur de la bordure droit différente à celui du background*/
border-left: 5px solid #COULEUR; /*couleur de la bordure gauche différente à celui du background*/
border-top: 1px dotted #COULEUR; /*couleur de la bordure du haut différente à celui du background*/
border-bottom: 1px dotted #COULEUR; /*couleur de la bordure du bas différente à celui du background*/
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
padding-right: 15px;
width:140px;
display:inline-block;
}

/* BOUTON DU MENU
————————————————*/
.menu {
color: #COULEUR; /*couleur du titre*/
font-family: verdana;
font-size: 9px;
text-align: center;
background-color: #COULEUR; /*couleur du fond*/
border-right: 5px solid #COULEUR; /*couleur de la bordure droit, même couleur que le background du cadre*/
border-left: 5px solid #COULEUR; /*couleur de la bordure gauche, même couleur que le background du cadre*/
border-top: 1px dotted #COULEUR; /*couleur de la bordure du haut, même couleur que le background du cadre*/
border-bottom: 1px dotted #COULEUR; /*couleur de la bordure du bas, même couleur que le background du cadre*/
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
padding-right: 15px;
width:140px;
display:inline-block;
}

/* BOUTON DU MENU SURVOLE
————————————————*/
.menu:hover {
color: #COULEUR; /*couleur du titre survolé*/
font-family: verdana;
font-size: 9px;
font-weight: bold ;
text-align: center;
background-color: #COULEUR; /*couleur du fond survolé*/
border-right: 5px solid #COULEUR; /*couleur de la bordure droit survolé, même couleur que le background du cadre*/
border-left: 5px solid #COULEUR; /*couleur de la bordure gauche survolé, même couleur que le background du cadre*/
border-top: 1px dotted #COULEUR; /*couleur de la bordure du haut survolé, même couleur que le background du cadre*/
border-bottom: 1px dotted #COULEUR; /*couleur de la bordure du bas survolé, même couleur que le background du cadre*/
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
padding-right: 15px;
width:140px;
display:inline-block;
}

/* LIEN EN MINI-MAJUSCULE
————————————————*/

a {
color: #COULEUR; /*couleur du lien*/
font-variant: small-caps;
}

a:link,a:active,a:visited {
color: #COULEUR; /*couleur du lien active et visité*/
font-variant: small-caps;
text-decoration: none !important;
}

a:hover{
color: #COULEUR; /*couleur du lien survolé*/
font-variant: small-caps;
text-decoration: none !important;
}

♦ Et enregistrez. !

© By Shaynee

Laisser un commentaire

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