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.

<center><table><tr><td>
  <div class=”titremenu”>NAVIGATION</div>
      <br />
      <div class=”menu”>
      <a href=”LIEN DU MENU”>MENU 1</a>
      <a href=”LIEN DU MENU”>MENU 2</a>
      <a href=”LIEN DU MENU”>MENU 3</a>
      <a href=”LIEN DU MENU”>MENU 4</a>
      <a href=”LIEN DU MENU”>MENU 5</a>
      <a href=”LIEN DU MENU”>MENU 6</a>
      <a href=”LIEN DU MENU”>MENU 7</a>
      <a href=”LIEN DU MENU”>MENU 8</a>
  </div>
</td></tr></table></center>

♦ 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 PERSONNALISEE
———————————————-*/

.menu a{
text-shadow: 0px 1px 1px #COULEUR; /*Couleur de l’ombre du texte*/
text-align : left;
text-transform: uppercase;
font-size: 10pt;
font-weight: bold;
font-family: Century Gothic, tahoma;
background: #COULEUR; /*Couleur du fond*/
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
margin-left:40px;
margin-right: 40px;
display: block;
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;
}

 

.menu a:hover {
text-shadow: 0px 1px 1px COULEUR; /*Couleur de l’ombre du texte*/
text-align : left;
text-transform: uppercase;
font-size: 12pt;
font-weight: bold;
font-family: Century Gothic, tahoma;
background: #COULEUR; /*Couleur du fond*/
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
margin-left:20px;
margin-right: 20px;
display: block;
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;
}

 

/* TITRE DES MENUS
———————————————-*/

.titremenu {
    color: #COULEUR; /*Couleur du Texte*/
    text-shadow: 0px 1px 1px COULEUR; /*Couleur de l’ombre du texte*/
    text-align : center;
    text-transform: uppercase;
    font-size: 12pt;
font-weight: bold;
font-family: Century Gothic, tahoma;
    border-bottom: 2px solid #COULEUR; /*Couleur de la bordure du bas*/
    padding-bottom:3px;
    }

 

 

/* LIENS 
———————————————-*/

a {
color: #COULEUR; /*Couleur du lien*/
text-decoration: none !important;
}

a:focus {
color: #COULEUR; /*Couleur du lien */
text-decoration: none !important;
}

a:visited {
color: #COULEUR; /*Couleur du lien qui a été visité*/
text-decoration: none !important;
}

a:active{
color: #COULEUR; /*Couleur du lien qui est active*/
text-decoration: none !important;
}

a:hover{
color: #COULEUR; /*Couleur du lien survolé*/
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 *