j'ai un Menu déroulant qui fonctionne bien sur FF, mais sous IE, il se ferme si on avance le curseur trop loin dans le sous menu qui s'est ouvert, ou si le curseur passe par dessus un texte (qui est normalement derrière le menu qui s'est ouvert)
voici le lien du menu déroulant :
http://www.lycee-eiffel-narbonne.fr/
voici le CSS et le HTML du menu :
remarque : j'utilise
qui contient :
...pour que le hover fonctionne sous IE.[/i][/i][/i][/i][/i][/i][/i]
Modifié par Exanova (11 Feb 2008 - 15:28)
voici le lien du menu déroulant :
http://www.lycee-eiffel-narbonne.fr/
voici le CSS et le HTML du menu :
div#menu a{
color: #ffd753;
height: 23px;
font-family: Arial;
font-size: 8pt;
font-weight: bold;
text-align: center;
margin-top: 0px;
padding-top: 0px;z-index: 10;
}
div#menu li {
position: relative;
list-style: none;
margin: 0px;
padding-top: 6px;
border-bottom: 1px solid #adb0d5;
background: url("); ECHO(IMG."menu_bouton_inactif.gif);
z-index: 10;
}
div#menu li:hover {
background: url("); ECHO(IMG."menu_bouton_actif.gif);
z-index: 10;
}
div#menu li.sousmenu:hover {
background: url("); ECHO(IMG."menu_bouton_actif.gif);
z-index: 10;
}
div#menu ul a {
width: inherit;z-index: 10;
}
div#menu ul ul {
position: absolute;
top: 0px;z-index: 10;
}
/*TAILLE PREMIERE COLONNE*/
div#menu {
float: left;
width: 84px;
margin-left:2px;z-index: 10;
}
div#menu ul {
margin: 0px;
padding: 0px;
width: 84px;
border: 0px solid;z-index: 10;
}
div#menu ul ul {
z-index: 10;
left: 84px;
display: none;z-index: 10;
}
div#menu li a {
display: block;
text-decoration: none;
width: 84px;
border-left: 0px solid #adb0d5;z-index: 10;
}
/*TAILLE DEUXIEME COLONE*/
div#menu ul.niveau2 ul {
left: 84px;z-index: 10;
}
div#menu ul.niveau2 li {
background: url("); ECHO(IMG."sousmenu_bouton_inactif.gif);
z-index: 10;
}
div#menu ul.niveau2 li:hover {
background: url("); ECHO(IMG."sousmenu_bouton_actif.gif);
z-index: 10;
}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {
width: 209px;z-index: 10;
display: block;
}
div#menu ul.niveau2 li a {
width: 209px;z-index: 10;
}
/*TAILLE TROISIEME COLONNE*/
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
width: 84px;
display: block;z-index: 10;
}
/*TAILLE DEUXIEME COLONE BIS*/
div#menu ul.niveau2bis ul {
left: 84px;z-index: 10;
}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2bis {
display: block;
width: 84px;z-index: 10;
}
div#menu ul.niveau2bis li a {
width: 84px;z-index: 10;
}<DIV ID="menu">
<UL CLASS="niveau1">
<LI class="sousmenu"><A HREF='<?PHP ECHO(SITE);?>'>Accueil</A>
<UL CLASS="niveau2">
<LI><A HREF='<?PHP ECHO(PRES);?>'>Présentation</A></LI>
<LI><A HREF='<?PHP ECHO(ADMI);?>'>Administration</A></LI>
<LI><A HREF='<?PHP ECHO(HIST);?>'>Un peu d'Histoire</A></LI>
</UL>
</LI>
<LI class="sousmenu"><A HREF="">Actualité</A>
<UL CLASS="niveau2">
<LI><A HREF='<?PHP ECHO(AGEN);?>'>Agenda</A></LI>
<LI><A HREF='<?PHP ECHO(ACT10);?>' target='_blank'>11/07 Rencontres parents-profs</A></LI>
<LI><A HREF='<?PHP ECHO(ACT5);?>' target='_blank'>11/07 Actes du CA du 8</A></LI>
<LI><A HREF='<?PHP ECHO(ACT6);?>' target='_blank'>11/07 Actes du CA du 20</A></LI>
<LI><A HREF='<?PHP ECHO(ACT7);?>' target='_blank'>11/07 EPCP 2008</A></LI>
<LI><A HREF='<?PHP ECHO(ACT8);?>' target='_blank'>11/07 MAPA</A></LI>
</UL>
</LI>
<LI class="sousmenu"><A HREF="">Personnels</A>
<UL CLASS="niveau2">
<LI><A HREF='<?PHP ECHO(PPCI);?>'>Professeurs principaux</A></LI>
</UL>
</LI>
<LI class="sousmenu"><A HREF="">Pédagogie</A>
<UL CLASS="niveau2">
<LI><A HREF='<?PHP ECHO(FORM);?>'>Formations</A></LI>
<LI><A HREF='<?PHP ECHO(LOGNO);?>' target='_blank'>Accès au logiciel de notes</A></LI>
<LI><A HREF='<?PHP ECHO(CDC1TR);?>' target='_blank'>Conseils de classe 1er trimestre</A></LI>
<LI><A HREF='<?PHP ECHO(EMPL);?>' target='_blank'>Emplois du temps</A></LI>
<LI><A HREF='<?PHP ECHO(GRET);?>' target='_blank'>G.R.E.T.A</A></LI>
</UL>
</LI>
<LI class="sousmenu"><A HREF="">Vie Scolaire</A>
<UL CLASS="niveau2">
<LI><A HREF='<?PHP ECHO(EQUVS);?>'>L'équipe vie scolaire 2007-2008</A></LI>
<LI><A HREF='<?PHP ECHO(CALSTA);?>' target='_blank'>Calendrier des stages 2007-2008</A></LI>
<LI><A HREF='<?PHP ECHO(CLACPE);?>'>Répartition des classes par CPE</A></LI>
<LI><A HREF='<?PHP ECHO(REGINT);?>' target='_blank'>Règlement interieur du Lycée</A></LI>
</UL>
</LI>
<LI class="sousmenu"><A HREF='<?PHP ECHO(CDI);?>' target='_blank'>C.D.I</A></LI>
<LI class="sousmenu"><A HREF='<?PHP ECHO(AMICALE);?>' target='_blank'>L'Amicale</A></LI>
<LI class="sousmenu"><A HREF="">Archives</A>
<UL CLASS="niveau2">
<LI><A HREF='<?PHP ECHO(ACT0);?>'>09/07 Concours général des métiers</A></LI>
<LI><A HREF='<?PHP ECHO(ACT1);?>' target='_blank'>10/07 Partenariat avec la justice</A></LI>
<LI><A HREF='<?PHP ECHO(ACT9);?>'>10/07 lettre de Guy Moquet</A></LI>
<LI><A HREF='<?PHP ECHO(ACT3);?>' target='_blank'>10/07 Conseil 21</A></LI>
</UL>
</LI>
<LI class="sousmenu"><A HREF="">Nous joindre</A>
<UL CLASS="niveau2">
<LI><A HREF='<?PHP ECHO(COURTELFAX);?>'>Courrier, Tel, Fax</A></LI>
<LI><A HREF='<?PHP ECHO(ACCROUT);?>'>Accès routier</A></LI>
<LI><A HREF='<?PHP ECHO(MAPPY);?>' target='_blank'>Préparer son itinéraire</A></LI>
</UL>
</LI>
<?PHP if(isset($_SESSION['login']))
{
include("gauchea.php");
}
?>
</UL>
</DIV>remarque : j'utilise
body {
behavior: url(".SITE."csshover.htc);
}qui contient :
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* HOVER - V1.00.031224 - whatever:hover in IE
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2003 - Peter Nederlof
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/
var CSSBuffer, doc = window.document;
function parseStylesheets() {
var rules, sheet, sheets = doc.styleSheets;
var bufferIndex = sheets.length;
var head = doc.getElementsByTagName('head')[0];
var buffer = doc.createElement('style');
buffer.setAttribute('media', 'screen');
buffer.setAttribute('type', 'text/css');
head.appendChild(buffer);
CSSBuffer = sheets[bufferIndex];
for(var i=0; i<sheets.length -1; i++) {
sheet = sheets[i];
if(!sheet.media || sheet.media == 'screen') {
rules = sheet.rules;
for(var j=0; j<rules.length; j++) {
parseCSSRule(rules[j]);
}
}
}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!select || !style || select.indexOf(':hover') < 0) return;
var newSelect = select.replace(/\:hover/g, '.onHover');
CSSBuffer.addRule(newSelect, style);
var affected = select.replace(/\:hover.*$/g, '');
var elements = getElementsBySelect(affected);
for(var i=0; i<elements.length; i++) {
if(elements[i].nodeName == 'A') continue;
new HoverElement(elements[i]);
}
}
/**
* HoverElement
* -------------------------
* applies the hover
*/
function HoverElement(element) {
if(element.isHoverElement) return;
element.isHoverElement = true;
element.attachEvent('onmouseover',
function() { element.className += ' onHover'; });
element.attachEvent('onmouseout',
function() { element.className = element.className.replace(/onHover/g, ''); });
}
/**
* domFinder
* -----------------------------------
* returns list of elements based on css selector
*/
function getElementsBySelect(rule) {
var nodeList = [doc], sets = rule.split(' ');
for(var i=0; i<sets.length; i++) {
nodeList = domFinder.filterNodes(sets[i], nodeList);
} return nodeList;
}
var domFinder = {
findNodes:function(tag, docs) {
var res, nodes = [];
for(var i=0; i<docs.length; i++) {
res = docs[i].getElementsByTagName(tag);
for(var j=0; j<res.length; j++) nodes[nodes.length] = res[j];
} return nodes;
},
filterNodes:function(select, docs) {
var filtered = [], nodes,rule,atr,s = (/#|\./).exec(select);
if(!s) return this.findNodes(select, docs);
nodes = this.findNodes((rule = select.split(s))[0], docs);
atr = (s == '#')? 'id':'className';
for(var i=0; i<nodes.length; i++) {
if(new RegExp('(^|\\s)' + rule[1] + '(\\s|$)').exec(nodes[i][atr]))
filtered[filtered.length] = nodes[i];
} return filtered;
}
}
</script>...pour que le hover fonctionne sous IE.[/i][/i][/i][/i][/i][/i][/i]
Modifié par Exanova (11 Feb 2008 - 15:28)