Bonjour,
Je bute sur un problème de menu déroulant, j'ai déjà essayé pas mal de choses. Le premier niveau est avec des images, le sous-menu en texte. J'arrive à faire passer le sous-menu sous la div du menu principal, mais alors j'ai le texte du centre de la page qui reste désespérément au-dessus ! Je voudrais que le sous-menu s'affiche et masque la partie centrale..
la page
page html
(je mets dans une table car j'aurai une partie centrale fixe avec des marges latérales fluides, et avec des div impossible de positionner le sous-menu par rapport au menu vertical principal)
css :
et un script
Merci d'avance à qui pourra m'aider !!!
Modifié par CharliesAngel (14 Oct 2011 - 21:18)
Je bute sur un problème de menu déroulant, j'ai déjà essayé pas mal de choses. Le premier niveau est avec des images, le sous-menu en texte. J'arrive à faire passer le sous-menu sous la div du menu principal, mais alors j'ai le texte du centre de la page qui reste désespérément au-dessus ! Je voudrais que le sous-menu s'affiche et masque la partie centrale..
la page
page html
<table>
<tr><td width="190">
<div id="navGauche" style="background-color:#50F;" >
<ul id="Nav">
<li>
<img src="images/menu_gauche/gauche_clients_bleu.png" alt="" width="177" height="28" />
<div id="sousMenu1">
<ul class="Menu">
<li><a href="#">Sous element 1</a></li>
<li><a href="#">Sous element 2</a></li>
</ul>
</div>
</li>
<li>
<img src="images/menu_gauche/gauche_societe_bleu.png" alt="" width="177" height="24" />
<div id="sousMenu2" >
<ul class="Menu">
<li><a href="#">Sous element 3</a></li>
<li><a href="#">Sous element 4</a></li>
<li><a href="#">Sous element 5</a></li>
</ul>
</div>
</li>
<li>
<img src="images/menu_gauche/gauche_points_bleu.png" alt="" width="177" height="24" />
<div id="sousMenu3" >
<ul class="Menu">
<li><a href="#">Sous element 3</a></li>
<li><a href="#">Sous element 4</a></li>
</ul>
</div>
</li>
<li>
<img src="images/menu_gauche/gauche_contact_bleu.png" alt="" width="177" height="23" />
<div id="sousMenu4" >
<ul class="Menu">
<li><a href="#">Sous element 3</a></li>
<li><a href="#">Sous element 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div id="visuel">
<img src="images/visuel_gauche.jpg" />
</div>
</td>
<td>
<div id="editorial">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis ipsum lorem, ut accumsan nisi. Nullam et semper metus. Proin et purus quis enim placerat adipiscing facilisis at purus. Cras iaculis, magna vel dignissim porta, dui dolor vestibulum ligula, eget scelerisque turpis dui eu enim. Donec rutrum tortor nec justo semper quis tempus urna porta. Aenean hendrerit, nulla ut interdum lobortis, lectus elit sodales velit, ut vehicula justo dui vitae mauris. Etiam fringilla dui et risus fermentum pretium.
Aliquam interdum nisl in mi tempor consectetur. Nullam non ornare nisl. In dapibus arcu quis ante pulvinar elementum. Duis dignissim convallis dapibus. Nulla tellus orci, luctus quis placerat in, sollicitudin dictum neque. Aenean justo nunc, ornare sed feugiat nec, vestibulum et enim. In in diam lectus, tristique tincidunt urna. Vestibulum felis ipsum, elementum a porttitor vitae, sollicitudin ac nibh. Maecenas et pulvinar lectus. Aenean pharetra massa nec velit aliquam vitae feugiat sem mollis. Donec quis porttitor tortor. Nulla ac risus quis risus pharetra laoreet ac et tortor. Donec blandit pellentesque nisi ac rutrum. Donec sit amet ligula orci. Morbi elit eros, posuere quis eleifend ut, mollis ut tortor. Proin justo lorem, fringilla aliquam egestas vitae, malesuada nec sem.
Fusce ullamcorper lobortis dapibus. Donec blandit gravida vulputate. Curabitur ut mi eget nisl vestibulum placerat vitae malesuada tellus. Duis blandit bibendum tellus non rutrum. Aliquam vehicula urna id sapien fringilla rutrum. Phasellus elit erat, pellentesque eget auctor in, fringilla nec purus. Phasellus viverra ante non magna aliquet id posuere justo lobortis. Cras tortor lorem, consequat pellentesque ultrices eget, aliquet at orci.
</div>
</td>
<td>
</td>
</tr>
</table>
(je mets dans une table car j'aurai une partie centrale fixe avec des marges latérales fluides, et avec des div impossible de positionner le sous-menu par rapport au menu vertical principal)
css :
#Nav {
width: 100px;
padding: 0;
list-style: none;
}
#Nav ul{
z-index:15;
}
#Nav li {
background: #0dd;
margin: 0px;
height:24px;
z-index:16;
}
.Menu {
padding: 0;
margin-top: -28px;
margin-left: 155px;
width: 195px;
list-style: none;
display: none;
text-indent: 10px;
z-index:10;
}
.Menu li {
height: 35px;
width: 200px;
z-index:11;
}
.Menu li a{
z-index:50;
padding-left:20px;
}
#navGauche{
width:182px;
height:95px;
}
#sousMenu1{
z-index:50px;
padding-left:1px;
}
#sousMenu2{
z-index:50px;
padding-left:4px;
}
#sousMenu3{
z-index:50px;
padding-left:8px;
}
#sousMenu4{
z-index:50px;
padding-left:11px;
}
#editorial{
z-index:1;
}
et un script
var obj = null;
function checkHover() {
if (obj) {
obj.find('ul').css('display','block');
} //if
} //checkHover
$(document).ready(function()
{
$('#Nav > li').hover(function() {
if (obj) {
obj.find('ul').css('display','none');
obj = null;
} //if
$(this).find('ul').css('display','block');
},
function() {
obj = $(this);
setTimeout(
"checkHover()",
1000); // si vous souhaitez retarder la disparition, c'est ici
});
$("#menugauche td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
$("#menugauche td img").mouseover(function () {
var src = $(this).attr("src").replace("bleu", "rouge");
$(this).attr("src",src);
$("#gaucheClients").toggle();
})
.mouseout(function () {
var src = $(this).attr("src").replace("rouge", "bleu");
$(this).attr("src",src);
}
);
});
Merci d'avance à qui pourra m'aider !!!
Modifié par CharliesAngel (14 Oct 2011 - 21:18)
