Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
Les tuto 2 Demolite
19 novembre 2010

Menu vertical pour mettre dans une colonne

Commencez par ouvrir votre feuille de style et collez les blocs suivants tout en bas de votre page...

#tablenavigation .blocfixe h2, #coinmoment .blocfixe h2 {
    width:180px;
    height:14px;
    background-image:url("https://storage.canalblog.com/41/57/493778/29912500.gif");
    background-repeat:no-repeat;
    background-position:left top;
    background-color:#9102a6;
    font-size:11px;
    overflow:hidden;
    padding:3px 10px 0px 10px;
    margin:0px 0px 0px 0px;
    font-weight:normal;
    color:#FFFFFF;
}
#tablenavigation .sousmenufixe, #coinmoment .sousmenufixe {
    list-style-type:none;
    border-left:2px solid #c694d6;
    border-right:2px solid #c694d6;
    border-bottom:2px solid #c694d6;
    background-color:#000000;
    padding:3px 12px 3px 8px ;
    font-weight:normal;
}
#tablenavigation .bloc, #tablenavigation .blocfixe, #coinmoment .blocfixe {
    overflow:hidden;
    margin:0 0 0.5em 0;
    list-style:none;
    font-size:11px;
}
#tablenavigation .bloc ul li a:hover,#tablenavigation .blocfixe ul li a:hover {
    background-color:#9102a6;
    color:#FFCCFF;
    text-decoration:underline;
}
#tablenavigation .bloc ul li a,#tablenavigation .blocfixe ul li a {
    color:#d69df4;
    text-decoration:none;
}
#tablenavigation .sousmenufixe a, #tablenavigation .sousmenu a {
    background:url(actionhover.png) 4px center no-repeat;
    display:block;
    padding:2px 2px 2px 14px;
    text-align:left;
}

Ne me demandez pas à quoi sert tout ça, j'ai paramétré le menu afin que vous n'ayez pas de modif à faire, sauf pour les codes couleurs, c'est pas sorcier, un code couleur c'est ça #d69df4 dès que vous en voyez un, vous le changez et vous verrez bien ce qu'il se passe...

A moins que votre colonne soit noire, vous devez changer l'adresse qui se trouve dans le premier bloc en blanc :

https://storage.canalblog.com/41/57/493778/29912500.gif

Copiez-collez cette adresse dans votre navigateur puis enregistrez là sur votre pc pour pouvoir la modifier..

Ouvrez-là dans Photofiltre pour changer la couleur des angles, vous devez mettre la même couleur que celle de votre colonne où ira le menu...

Sans_titre_3

Récupérez l'adresse de cette nouvelle image et collez-la à la place de l'ancienne.

Ensuite, vous collez le script suivant dans votre page d'accueil, dans une de vos colonnes et hop...

<div id="tablenavigation">
<div class="blocfixe">

<h2>Accueil</h2>
<div class="sousmenufixe">
<ul>
<li><a href="Adresse de la page.html">Accueil</a></li>
</ul>
</div>
</div>

<div class="blocfixe">
<h2>Profil</h2>
<ul>
<li><a href="Adresse de la page.html">Mes passions</a></li>
<li><a href="Adresse de la page.html">Ma musique</a></li>
<li><a href="Adresse de la page.html">Ma cuisine</a></li>
</ul>
</div>
</div>

<div class="blocfixe">
<h2>Divers</h2>
<ul>
<li><a href="Adresse de la page.html">Mes liens</a></li>
<li><a href="Adresse de la page.html">Mon Livre d'or</a></li>
<li><a href="Adresse de la page.html">Contactez moi</a></li>
<li><a href="Adresse de la page.html">Mon Forum</a></li>
</ul>
</div>
</div>
</div>

Placez dans le script l'adresse de vos liens et aussi le titre qui apparait dans le menu et c'est tout !

Menu

Publicité
Publicité
Commentaires
Publicité
Derniers commentaires
Newsletter
Publicité