MENU DEROULANT VERTICAL EN CSS

10 août 2007

Alors celui là, vous avez été nombreux à me le demander...
Il est sympa et en plus il est compatible avec Firefox et Internet explorer !

Un grand merci à PêUR chez qui j'ai trouvé ce script : www.peutetreunereponse.net
Son site va fermer, car madame la cigogne devrait pas tarder à faire un lâché de bébé au dessus de chez lui...si tu passes par là, tous mes voeux de bonheur.

Alors, je ne vais pas rentrer dans certains détails que ni vous ni moi ne comprendrons, mais plutôt vous dire où et comment coller les codes pour avoir un zoli menu dynamique top moumoute.

Commençons par la "feuille de style"...ouvrez la, et tout en bas de la page, collez les codes suivant :

.menuIE {
display:none !important;
display:block;
}

a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
color:#000;
width:90px;
height:18px;
display:block;
background:#c33;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family: verdana;
font-size:10px;
line-height:18px;
overflow:hidden;
}

a.boutonIE:hover {
color:#fff;
background:#000;
overflow:visible;}

a.boutonIE:hover table {
display:block;
background:#eee;
border-collapse:collapse;
}

.boutonFF {
color:#000;
width:90px;
height:18px;
display:block !important;
display:none;
background:#c33;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family: verdana;
font-size:10px;
line-height:18px;
overflow:hidden;
}

.boutonFF:hover {
height:auto;
cursor:pointer;
color:#fff;
background:#000;
}

a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
display:block;
width:90px !important;
width:88px;
height:18px;
border-bottom:1px solid #000;
text-decoration:none;
color:#000;
font-family: verdana;
font-size:10px;
text-align:center;
background:#eee;
}

a.SousMenu:hover {background:#BCCCD2;}

Il y a une partie qui correspond au menu pour Internet explorer et l'autre pour Firefox.
Ne supprimez pas une partie ou une autre, car sinon les visiteurs n'utilisant pas le même navigateur que vous, ne verraient pas le menu

Ensuite "ouvrez" votre "page d'accueil" et collez le code ci-dessous à l'endroit où vous voulez mettre le menu.

<div class="menuIE">
<a class="boutonIE" href="#nogo">Titre menu
<table><tr><td>
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
</td></tr></table>
</a>
<a class="boutonIE" href="#nogo">Titre menu
<table><tr><td>
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
</td></tr></table>
</a>
</div>

<div class="boutonFF">Titre menu<br />
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
</div>
<div class="boutonFF">Titre menu<br />
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
</div>

Pour qu'il apparaisse tout en haut le long de votre bannière comme ce blog, collez le code juste après cette ligne de code en faisant un retour à la ligne sous <div id="topbar-logo"> puis un autre après avoir collé le code ça permet d'y voir plus clair.

<body><div id="container"><div id="topbar-logo">
Code ici

Voila, à cette étape, si vous faites un "Visualiser" votre menu est sur votre blog, mais le plus long reste à faire...

Il faut bien sur renseigner le menu en mettant un "Titre au menu" pour la case visible.
et renseigner chaque ligne : <a class="SousMenu" href="URL">titre</a>
avec l'URL de destination et le titre.
Vous devez remplir de la même façon les blocs IE et FF.

Ne touchez pas au reste.

Maintenant, il faut s'occuper de l'apparence de votre menu...changer les couleur, ou éventuellement agrandir les cases...

"Ouvrez" la feuille de style et changez les codes couleurs en place par de nouveaux.
Vous devez repérez les blocs pour IE et FF (Internet explorer et Firefox) et mettre les mêmes codes couleur.

Pour agrandir les cases, changez tous les width:90px;

Pour le menu de ce blog, j'ai mis 177px à la place de 90px et ça fait exactement la largeur de ma bannière, pour 5 cases...

Avec un peu de patience et en observant bien, vous y arriverez ;-)

Pour plus de détails, c'est par Ici...

Posté par Demolite à 11:06 - Commentaires […] - Permalien [#]

Tags: menu

Partager cet article

Vous aimez ?

0 vote

METTRE UN CADRE DANS UNE COLONNE

PETITE MODIF SUR COMMENT METTRE DE LA MUSIQUE A L'OUVERTURE DE SON BLOG

Commentaires

La Papote

30/03/2009 12:14

Bonjour,<br /> <br /> Merci pour tes tutos très clairs et pratiques.<br /> J'ai créé mon menu et à priori tout se passait bien tant sur IE que sur FF sur mon ordi à la maison.<br /> En revanche, je viens de me brancher sur FF au bureau et, là, ça bugue.<br /> <br /> J'ai créé mon menu avec une polie "Bickley Script" or elle apparait bien sur IE et FF sur l'ordi maison mais sur l'ordi du bureau, mon menu est en "Times" et, en plus, les lignes où les titres sont un peu longs, se superposent...<br /> <br /> Peux-tu m'aider à résoudre ce problème, stp ?

Demolite

17/09/2008 12:59

[Salut]<br /> Je ne suis pas certaine d'avoir compris ta question, mais je dirais que tu dois mettre le script du menu aussi sur [G]la page des archives[/G] et celle [G]des messages[/G]...<br /> [Super]

chris

17/09/2008 12:43

bonjour, comment fais tu pour avoir ton menu du site et quand tu clique tu affiche sur la meme page tes infos correspondante. je ne trouve pas, si je mets le nom de la page j'ouvre la page et le menu n'est plus là.<br /> merci

hydriade

01/09/2008 14:35

hihi merci pour la réponse et pour tout le mal que tu te donne mais j'ai préférer faire le menu horizontale il est super pratiquer !!!! et j'ai pris plein de t'est tuto en tout cas ton site et une vrais mine d'or pour moi!!! je m'éclate!!! merci beaucoup

hydriade

31/08/2008 15:46

Alors je voudrais d'abord dire que ton blog et super !! pour les nouveau sur canalblog comme moi[Chesse]Mais j'ai juste un petit souci mon menu comme tu le vois apparait bien mais il est tout en haut a gauche je sais pas c'est peut être un erreur de ma part mais je sais pas comment faire pour le mettre sous ma bannière ??? je te remercie pour ton aide et merci pour tout c'est tuto!!!!!!