18041 sujets
Questions générales et questions de débutants
Bonjour,
Merci pour votre aide.
Donc j'avais essayé avec la propriété z-index mais un bug m'avait empêché d'y voir clair, mais maintenant ça marche toutefois pour faire ce menu déroulant, j'ai utilisé une liste (le menu) qui affiche au survol de la souris (sur un item de celui-ci) un div (et pas une liste dans une liste) mais je ne suis pas sûr que cela soit propre, ceci dit je dois absolument avoir un ss menu de la taille du menu (ts items); des conseils ?. Voilà le code il reste au moins un bug c'est quand on sort du menu sans être passer par le ss menu:
Merci.
Saxo
Merci pour votre aide.
Donc j'avais essayé avec la propriété z-index mais un bug m'avait empêché d'y voir clair, mais maintenant ça marche toutefois pour faire ce menu déroulant, j'ai utilisé une liste (le menu) qui affiche au survol de la souris (sur un item de celui-ci) un div (et pas une liste dans une liste) mais je ne suis pas sûr que cela soit propre, ceci dit je dois absolument avoir un ss menu de la taille du menu (ts items); des conseils ?. Voilà le code il reste au moins un bug c'est quand on sort du menu sans être passer par le ss menu:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<LINK rel="stylesheet" type="text/css" href="maquette_rollover_opaque.css">
<SCRIPT language="Javascript">
function afficherSSMenu() {
var myBlock = document.getElementById('sub');
myBlock.style.display="block";
}
function fermerSSMenus() {
var myBlock = document.getElementById('sub');
myBlock.style.display="none";
}
function styleMenu(id){
var e =document.getElementById(id);
e.style.backgroundColor='#D3D3D3';
e.style.height="50px";
}
function styleMenuOff(id){
var e =document.getElementById(id);
e.style.backgroundColor='grey';
e.style.height="50px";
}
function listener1(event){
event = event || window.event;
event.target = event.target || event.srcElement;
if(event.target === this){
var myBlock = document.getElementById('sub');
myBlock.style.display="none";
styleMenuOff('secter');
}
else {
var myBlock = document.getElementById('sub');
myBlock.style.display="block";
}
}
</SCRIPT>
</head>
<body id="home" onload="fermerSSMenus()">
<div id="conteneur">
<div id="header"></div>
<div id="topnav">
<ul>
<li>
<a onmouseover="fermerSSMenus();styleMenuOff('secter')"href="#" class="Welcome">Welcome</a>
</li>
<li>
<a onmouseover="fermerSSMenus();styleMenuOff('secter')"href="#" class="requestServices">Request Services</a>
</li>
<li>
<a onmouseover="fermerSSMenus();styleMenuOff('secter')"href="#" class="provideServices">Provide Services</a>
</li>
<li>
<a id="secter"onmouseover="afficherSSMenu();styleMenu('secter')" href="#" class="secter">Secter</a>
</li>
</ul>
</div>
<div id="content"><p>Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?</p>
<p>Quibus ita sceleste patratis Paulus cruore perfusus reversusque ad principis castra multos coopertos paene catenis adduxit in squalorem deiectos atque maestitiam, quorum adventu intendebantur eculei uncosque parabat carnifex et tormenta. et ex is proscripti sunt plures actique in exilium alii, non nullos gladii consumpsere poenales. nec enim quisquam facile meminit sub Constantio, ubi susurro tenus haec movebantur, quemquam absolutum.
Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.
Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens, quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.
Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>
<p>Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est.
Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patris.
Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.</p>
</div>
<div class="coins" id="sub" onmouseover="styleMenu('secter')"onmouseout="listener1.call(this,event)">
<ul>
<li><h2><a href="#">Secter1</a></h2></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href="#">Secter2</a></h2></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href="#">Secter3</a></h2></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href="#">Secter4</a></h2></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
</ul>
</div>
</div>
</body>
</html>
#home{
margin:auto;
}
#conteneur{
width: 1280px;
margin:auto;
}
#topnav{
width: 1280px;
padding:0;
margin:auto;
height:50px;
font-size: 1.1em;
background-color:grey;
}
#topnav ul {
width: 1280px;
margin: 0;
padding:0;
list-style-type:none;
text-align:center;
}
#topnav li {
width:25%;
float:left;
}
#topnav li a{
display:block;
color:white;
text-decoration:none;
}
#topnav a:hover {
height:50px;
background-color:#D3D3D3;
}
#sub{
z-index:1;
position:absolute;
width: 1280px;
height:210px;
margin:auto;
top:50px;
background-color:#D3D3D3;
}
#sub ul{
position :relative;
left:50px;
list-style-type:none;
text-align:center;
float:left;
}
#sub li a{
color:grey;
}
#sub li a:hover{
color:white;
}
#content{
z-index:0;
position:absolute;
top:50px;
width: 1280px;
margin:auto;
}Merci.
Saxo
Bonsoir,
J'ai modifé les fct qui géraient l'affichage du ss menu : manque de fluidité. Voici le nouveau code:
Reste à s'occuper de la fermeture du ss menu lorsque l'on sort du menu s'en être passé par lui, avec relatedTarget je pense. Une idée ?
Merci.
J'ai modifé les fct qui géraient l'affichage du ss menu : manque de fluidité. Voici le nouveau code:
function listener1(event) {
e = event || window.event;
var target = e.relatedTarget || e.toElement;
if (!isChildOf(target, this)) {
var myBlock = document.getElementById('sub');
myBlock.style.display="none";
styleMenuOff('secter') ;
}
}
function isChildOf(el, parent) {
if (el === parent) {
return true;
}
if (el = el.parentNode) {
return isChildOf(el,parent);
}
}
Reste à s'occuper de la fermeture du ss menu lorsque l'on sort du menu s'en être passé par lui, avec relatedTarget je pense. Une idée ?
Merci.