Menu déroulant vertical

**nialyss** · 07/07/2008, 02h03

Bonjour,

je souhaite prochainement ouvrir une boutique ecommerce et pour des questions de budget, je me lance seule dans la création du site mais je suis plus que novice en la matière...

Jusque là je m'en suis sortie mais j'essaie d'intégrer un menu déroulant vertical avec sous menus (lesquels devront se présenter dès le passage du curseur sur le menu, compliqué j'avoue).

J'ai trouvé un modèle que je trouve parfait = http://www.biotissime.fr/ , je sais changer les couleurs, ect... c'est déjà un début mais je souhaiterais savoir si l'un de vous pourrait m'aider à rédiger le code permettant d'obtenir un tel résultat...

J'ai réellement cherché sur tous les sites, essayé tous les codes que je trouvais mais soit ils ne fonctionnent pas soit le menu reste statique (même en rajoutant un code javascript...)

Bref, y aurait-il une âme charitable pour me venir en aide...?

Merci d'avance.

**popo** · 07/07/2008, 08h51

As-tu essayé le CSS ?

Regarde du coté de la propriété display et de :hover

**nialyss** · 07/07/2008, 15h21

J'ai un peu tout essayé dont ce code

<head>

<STYLE type=text/css>BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 100pt; PADDING-BOTTOM: 0px; MARGIN: 5px; COLOR: SaddleBrown; PADDING-TOP: 0px; FONT-FAMILY: Tahoma
}
.outer_small {
FONT-SIZE: 50px; COLOR: #97a7b1; FONT-FAMILY: Tahoma
}
BODY {
FONT-SIZE: 13px
}
TD {
FONT-SIZE: 13px
}
TH {
FONT-SIZE: 13px
}
.hidden {
DISPLAY: none; VISIBILITY: hidden
}
.chanteurs {
FONT-WEIGHT: bold; FONT-SIZE: 13px
}
A:link {
FONT-WEIGHT: bolder; FONT-SIZE: 13px; COLOR: saddlebrown; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; MARGIN: 5px; TEXT-DECORATION: none
}
A:visited {
FONT-WEIGHT: bolder; FONT-SIZE: 13px; COLOR: pink; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.smalllinks {
FONT-SIZE: 8px; COLOR: #b7c8c2; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.smalllinks2 {
FONT-SIZE: 10px; COLOR: #b7c8c2; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#Layer2 {
Z-INDEX: 1; LEFT: 805px; WIDTH: 120px; POSITION: absolute; TOP: 208px; HEIGHT: 600px
}
H1 {
FONT-SIZE: 60px; COLOR: blue; FONT-FAMILY: Verdana
}
</STYLE>

<style> table.MsoNormalTable
{mso-style-parent:"";
font-size:10.0pt;
font-family:"Times New Roman";
}
span.adus
{}
</style><script type="text/javascript">

</script>

</style>
</HEAD>

<dl id="menu">
</ul>
</dd>

<dt onclick="javascript:montre('smenu2');">Menu1</dt>

<dd id="smenu2">
<ul>
<li><a href="#">Smenu1</a></li>
<li><a href="#">Smenu2</a></li>

<li><a href="#">Smenu3</a></li>
</ul>

</dd>

<dt onclick="javascript:montre('smenu3');">Menu2</dt>

<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>

<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>

<dt onclick="javascript:montre('smenu3');">Menu3</dt>

<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>

</ul>
</dd>
<dt onclick="javascript:montre('smenu4');">Menu 4</dt>

<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>

</dl>

qui n'est pas mal sauf qu'il ne s'ouvre pas vers la droite et que l'ouverture des sous menus ne se fait qu'en cliquant sur le menu et en plus ils restent ouverts....

**popo** · 08/07/2008, 13h24

Il me semble que je t'ai parlé du :hover.

tu as le a:link (lien) et le a:visited (lien visité) dans ton code. Il te manque le a:hover (survol du lien avec la souris).

Pour placer ton sous menu à droite, il faut lui mettre la une position relative à ton menu.

**nialyss** · 08/07/2008, 14h51

Bonjour,

Je te remercie de ta réponse mais comme je l'ai écrit plus haut, ce language est moi pour le moment on fait deux...

Pourrais tu m'en dire un peu plus, tout au moins me dire ou je dois placer ce dont tu me parles.

Merci

**FraK** · 08/07/2008, 15h00

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick

C'est à cause de cela que ça donne ce résultat.
Traduction du code <dt onclick="javascript:montre('smenu2');">Menu1</dt>

à l'action du click, charger le js "montre(smenu2)" sur le lien menu1

Si tu veux juste au survol le onclick devra être remplacer par onMouseOver.

Ensuite si tu veux le même menu, autant regarder la source du code du site que tu nous montre en exemple, de pomper le tout, et d'adapter à ta sauce après.

Menu déroulant vertical

HTML

Vue hybride

Discussions similaires

Partager

Partager