Creer Menu Vertical, help

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Creer Menu Vertical, help

Message par Zoulinou le Jeu 26 Juil 2012 - 13:03

Bonjour a tous

je souhaiterai créer ceci:


Vous pouvez voir l'animation verticale , ici:
http://www.mandchou.com/mB/#

CSS de base:
Code:
ul.onglets-vert { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; width:100px;}
ul.onglets-vert li { margin:0; padding:0; list-style:none; border:1px solid #999; margin:0 1px;}
ul.onglets-vert li a { display:block; background:#333; color:#FFF; text-decoration:none; padding:3px 6px; border:2px solid #FFF; font-size:12px; text-transform:uppercase; font-weight:bold;}
ul.onglets-vert li a:hover { background:#800;}

ul.onglets-vert li ul {  margin:0; padding:0 0 0 0; margin:-20px 0 0 0; }
ul.onglets-vert li ul li { float:none;  border:0; border-bottom:1px solid #FFF;}
ul.onglets-vert li ul li a { display:block; background:#BBB; color:#000; border:0; text-transform:none; font-weight:bold;}
ul.onglets-vert li ul li a:hover { background:#09b9eb;}



ul.onglets-vert li ul li ul {  padding:0 0 0 0; }
ul.onglets-vert li ul li ul li{ float:none;  border:0;  border-bottom:1px solid #BBB;}
ul.onglets-vert li ul li ul li a { display:block; background:#FAFAFA; color:#666; border:0; text-transform:none; font-weight:bold;}
ul.onglets-vert li ul li ul li a:hover { background:#EEE;}


html de base:
Code:
<ul class="onglets-vert mB2">

<li><a href="#">Rubrique 1</a>
<ul class="ulFirstChild" style="width: 220px; position: absolute; margin-left: 100px; display: none; opacity: 0.157726;">
<li><a href="#">Sous rubrique 1</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 0.00935367;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
<li><a href="#">Sous rubrique 2</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 0.00134276;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
</ul>
</li>
<li><a href="#">Rubrique 2</a>
<ul class="ulFirstChild" style="width: 220px; position: absolute; margin-left: 100px; display: none; opacity: 0.131951;">
<li><a href="#">Sous rubrique 1</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
<li><a href="#">Sous rubrique 2</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
</ul>
</li>
<li><a href="#">Rubrique 3</a>
<ul class="ulFirstChild" style="width: 220px; position: absolute; margin-left: 100px; display: none; opacity: 1;">
<li><a href="#">Sous rubrique 1</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 1;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
<li><a href="#">Sous rubrique 2</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
</ul>
</li>
<li><a href="#">Rubrique 4</a>
<ul class="ulFirstChild" style="width: 220px; position: absolute; margin-left: 100px; display: none; opacity: 0.108153;">
<li><a href="#">Sous rubrique 1</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none; opacity: 0.00221902;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
<li><a href="#">Sous rubrique 2</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
</ul>
</li>
<li><a href="#">Rubrique 5</a>
<ul class="ulFirstChild" style="width: 220px; position: absolute; margin-left: 100px; display: none; opacity: 1;">
<li><a href="#">Sous rubrique 1</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
<li><a href="#">Sous rubrique 2</a>


<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous rubrique 1</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
<li><a href="#">Sous sous rubrique 2</a>

<ul class="" style="width: 220px; position: absolute; margin-left: 220px; display: none;">
<li><a href="#">Sous sous sous rubrique 1</a></li>
</ul>

</li>
</ul>


</li>
</ul>
</li>
</ul>

Script 1 et deux sont en bas ce cette page:
http://www.mandchou.com/mB/#

Alors j'ai le menu principal qui s'affiche
mais pas les sous menus au passage de la souris...

Je suis ouvert a tout autre code que celui ci si vous avez qq chose qui fonctionne.


merci beaucoup


Dernière édition par Zoulinou le Jeu 26 Juil 2012 - 14:37, édité 1 fois

Zoulinou
***

Messages : 168
Inscrit(e) le : 05/09/2011

http://gfx-art.graphforum.com/
Zoulinou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Creer Menu Vertical, help

Message par Lorris le Jeu 26 Juil 2012 - 14:12

Bonjour,
Je vous conseille ce tutoriel.
Cordialement

Lorris
****

Masculin
Messages : 294
Inscrit(e) le : 05/02/2011

Lorris a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Creer Menu Vertical, help

Message par Zoulinou le Jeu 26 Juil 2012 - 14:26

Bonjour Lorris

je l'ai deja essayé et il fonctionne
mais son mode d'ouverture ne me convient pas...
je souhaite que se soit latéral pour les sous menus

Cordialement


Edit :

je viens de trouver mon bonheur ici:
http://css.developpez.com/galerie/?page=menus-verticaux


cordialement

Zoulinou
***

Messages : 168
Inscrit(e) le : 05/09/2011

http://gfx-art.graphforum.com/
Zoulinou a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum