bonjour à tous
je suis en train de travailler sur les menus de mon site et j'ai une compatibilité avec pas mal de navigateurs, que ce soit sous pc et sous mac...
mais il en reste un qui est réfractaire c'est IE pour mac...
la page est visible sur http://lezartistes.org/testmenu.php
et les menus en test sont ceux du haut sur fond pourpre (au passage rien ne sert de cliquer dessus car sinon ça va ouvrir d'autres pages qui ont les anciens menus, il faut seulement passer la souris dessus)
si quelqu'un peut me guider pour me dire d'où peut venir le problème?
merci à tous...
les fichiers sur lesquels je bosse sont sur la base de http://dosimple.ch/articles/Menus-dynamiques/
code css:
code du javascript appelé:
page lancée:
Modifié par mussara (22 Sep 2005 - 19:16)
je suis en train de travailler sur les menus de mon site et j'ai une compatibilité avec pas mal de navigateurs, que ce soit sous pc et sous mac...
mais il en reste un qui est réfractaire c'est IE pour mac...
la page est visible sur http://lezartistes.org/testmenu.php
et les menus en test sont ceux du haut sur fond pourpre (au passage rien ne sert de cliquer dessus car sinon ça va ouvrir d'autres pages qui ont les anciens menus, il faut seulement passer la souris dessus)
si quelqu'un peut me guider pour me dire d'où peut venir le problème?
merci à tous...
les fichiers sur lesquels je bosse sont sur la base de http://dosimple.ch/articles/Menus-dynamiques/
code css:
body{
margin-top:10em;
}
.menuIndicateur{
/* background: url(fleche.gif) center right no-repeat;*/
}
.menunew{
position:absolute;
top: 25px;/*3em;*/
left: 90px;/*3em;*/
display:block;
margin:0;
padding:0;
width:800px; /* important for Opera7 */
color:#FFFFFF;
}
.menunew ul{
position:absolute; /* pour sortir la liste du flux de donnée */
display:block;
width:124px;
margin:0;
padding:0;
color:#FFFFFF;
}
.menunew li ul{
visibility:hidden;
}
.menunew li li ul{
position:absolute; /* pour sortir la liste du flux de donnée */
top:auto;
left:auto;
margin-left:124px;
margin-top:-23px; /* move the sub menu verticaly */
}
.menunew li{
list-style:none;
width:124px;
height:auto;
display:inline;
display/**/:block;
float:none;
float/**/:left;
margin:0;
padding:0;
color:#FFFFFF;
}
.menunew li li{
display:block;
float:none;
}
/* correct a little IE bug */
* html .menunew li li{
display:inline;
}
.menunew a{
text-align:center;
background-color: #993333;
font-weight: bold;
border:1px #666 solid;
color:#ffffff;
display:block;
width:120px;
text-decoration:none;
padding:2px 0;
margin:1px;
}
.menunew a:hover{
background-color: #999900;
border:1px #aaa solid;
text-decoration: none;
font-weight: bold;
color:#ffffff;
}
/* for a mozilla better display with key nav */
.menunew a:focus{
background-color: #aaf;
}
/* hide some accessibility stuff */
.menunew span{
display:none;
}
code du javascript appelé:
var timeout = 500;
// not very clean but simple
// the function can be run in the HTML for faster display
// window.onload=initMenu;
// creat timeout variables for list item
// it's for avoid some warning with IE
for( var i = 0; i < 100; i++ )
{
eval("var timeoutli" + i + " = false;");
}
// this fonction apply the CSS style and the event
function initMenunew()
{
// a test to avoid some browser like IE4, Opera 6, and IE Mac
if ( browser.isDOM1
&& !( browser.isMac && browser.isIE )
&& !( browser.isOpera && browser.versionMajor < 7 )
&& !( browser.isIE && browser.versionMajor < 5 ) )
{
// get some element
var menunew = document.getElementById('menunew'); // the root element
var lis = menunew.getElementsByTagName('li'); // all the li
// change the class name of the menu,
// it's usefull for compatibility with old browser
menunew.className='menunew';
// i am searching for ul element in li element
for ( var i=0; i<lis.length; i++ )
{
// is there a ul element ?
if ( lis.item(i).getElementsByTagName('ul').length > 0 )
{
// improve IE key navigation
if ( browser.isIE )
{
addAnEvent(lis.item(i),'keyup',show);
}
// link events to list item
addAnEvent(lis.item(i),'mouseover',show);
addAnEvent(lis.item(i),'mouseout',timeoutHide);
addAnEvent(lis.item(i),'blur',timeoutHide);
addAnEvent(lis.item(i),'focus',show);
// add an id to list item
lis.item(i).setAttribute( 'id', "li"+i );
lis.item(i).getElementsByTagName('a')[0].className = 'menuIndicateur';
}
}
}
}
function addAnEvent( target, eventName, functionName )
{
// apply the method to IE
if ( browser.isIE )
{
//attachEvent dont work properly with this
eval('target.on'+eventName+'=functionName');
}
// apply the method to DOM compliant browsers
else
{
target.addEventListener( eventName , functionName , true ); // true is important for Opera7
}
}
// hide the first ul element of the current element
function timeoutHide()
{
// start the timeout
eval( "timeout" + this.id + " = window.setTimeout('hideUlUnder( \"" + this.id + "\" )', " + timeout + " );");
}
// hide the ul elements under the element identified by id
function hideUlUnder( id )
{
document.getElementById(id).getElementsByTagName('ul')[0].style['visibility'] = 'hidden';
}
// show the first ul element found under this element
function show()
{
// show the sub menu
this.getElementsByTagName('ul')[0].style['visibility'] = 'visible';
// clear the timeout
eval ( "clearTimeout( timeout"+ this.id +");" );
hideAllOthersUls( this );
}
// hide all ul on the same level of this list item
function hideAllOthersUls( currentLi )
{
var ul = currentLi.parentNode;
//alert(lis.childNodes.length);
for ( var i=0; i<ul.childNodes.length; i++ )
{
if ( ul.childNodes[i].id && ul.childNodes[i].id != currentLi.id )
{
hideUlUnderLi( ul.childNodes[i] );
}
}
}
// hide all the ul wich are in the li element
function hideUlUnderLi( li )
{
var uls = li.getElementsByTagName('ul');
for ( var i=0; i<uls.length; i++ )
{
uls.item(i).style['visibility'] = 'hidden';
}
}
page lancée:
<div class="head1">
<ul id="menunew">
<li><a href="principale.php?typ=pose" title=" pose... / posan... "><?php echo $MENU_POSENT; ?>...</a></dt>
<ul>
<li><a href="sommaire_bloc_general.php" title=" boulder / bulder "><?php echo $SMENU1_POSENT; ?></a></li>
<li><a href="sommaire_falaise_general.php" title=" cliff / deportiva "><?php echo $SMENU2_POSENT; ?></a></li>
<li><a href="modele.php?cat=tofart" title=" art' pics / fotos de arte "><?php echo $SMENU3_POSENT; ?></a></li>
<li><a href="modele.php?cat=emotion" title=" emotion / emocion "><?php echo $SMENU4_POSENT; ?></a></li>
<li><a href="sommaire_liens.php" title=" links / enlaces "><?php echo $SMENU5_POSENT; ?></a></li>
<li><a href="sommaire_what.php?themewhat=pose" title=" news? / noticias? "><?php echo $SMENU6_POSENT; ?> ?</a></li>
</ul>
</li>
<li><a href="principale.php?typ=propose" title=" propose... / proponen... "><?php echo $MENU_PROPOSENT; ?>...</a></dt>
<ul>
<li><a href="sommaire_propose_pa.php" title=" small ads / avisos "><?php echo $SMENU1_PROPOSENT; ?></a></li>
<li><a href="forum.php" title=" forum / foro "><?php echo $SMENU2_PROPOSENT; ?></a></li>
<li><a href="non_disponible.php" title=" design / diseño "><?php echo $SMENU3_PROPOSENT; ?></a></li>
<li><a href="knews.php" title=" others websites / otros sitios "><?php echo $SMENU4_PROPOSENT; ?></a></li>
<li><a href="sommaire_liens_divers.php?cat=propose" title=" links / enlaces "><?php echo $SMENU5_PROPOSENT; ?></a></li>
<li><a href="sommaire_what.php?themewhat=propose" title=" news? / noticias? "><?php echo $SMENU6_PROPOSENT; ?> ?</a></li>
</ul>
</li>
<li><a href="principale.php?typ=expose" title=" exhibit... / exponen... " ><?php echo $MENU_EXPOSENT; ?>...</a></dt>
<ul>
<li><a href="sommaire_art_flash.php?typ=milvia1" title=" painting / pintura "><?php echo $SMENU1_EXPOSENT; ?></a></li>
<li><a href="sommaire_art_flash.php?typ=marie" title=" ceramic / ceramica "><?php echo $SMENU2_EXPOSENT; ?></a></li>
<li><a href="sommaire_art_flash.php?typ=milvia2" title=" calligraphy / caligrafia "><?php echo $SMENU3_EXPOSENT; ?></a></li>
<li><a href="sommaire_art_flash.php?typ=franck" title=" art' pics / fotos de arte "><?php echo $SMENU4_EXPOSENT; ?></a></li>
<li><a href="sommaire_art_flash.php?typ=yvo" title=" digiscoping / digiscoping "><?php echo $SMENU5_EXPOSENT; ?></a></li>
<li><a href="sommaire_art_rue.php" title=" street' art / arte en la calle "><?php echo $SMENU6_EXPOSENT; ?></a></li>
<li><a href="sommaire_art_flash.php?typ=jean" title=" dance / danza "><?php echo $SMENU7_EXPOSENT; ?></a></li>
<li><a href="sommaire_liens_divers.php?cat=expose" title=" links / enlaces "><?php echo $SMENU8_EXPOSENT; ?></a></li>
<li><a href="sommaire_what.php?themewhat=expose" title=" news? / noticias? "><?php echo $SMENU9_EXPOSENT; ?> ?</a></li>
</ul>
</li>
<li><a href="principale.php?typ=repose" title=" relax... / se descansan... "><?php echo $MENU_REPOSENT; ?>...</a></dt>
<ul>
<li><a href="sommaire_autres_photos.php" title=" various / varios "><?php echo $SMENU1_REPOSENT; ?></a></li>
<li><a href="sommaire_autres_photos_rue.php" title=" street' art / arte en la calle "><?php echo $SMENU2_REPOSENT; ?></a></li>
<li><a href="sommaire_liens_divers.php?cat=divers" title=" links / enlaces "><?php echo $SMENU4_REPOSENT; ?></a></li>
<li><a href="sommaire_what.php?themewhat=repose" title=" news? / noticias? "><?php echo $SMENU5_REPOSENT; ?> ?</a></li>
</ul>
</li>
<li><a href="principale.php?typ=propose" title=" mail "><?php echo $MENU_CONTACTENT; ?>...</a></dt>
<ul>
<li><a href="envoi_mail.php" title=" send an email / enviar mensaje "><?php echo $SMENU1_CONTACTENT; ?></a></li>
<li><a href="envoi_newsletter.php" title=" newsletter / quedarse informado de las puestas al dia "><?php echo $SMENU2_CONTACTENT; ?></a></li>
<li><a href="envoi_liens.php" title=" propose a link / proponer un enlace "><?php echo $SMENU3_CONTACTENT; ?></a></li>
<li><a href="banniere.php" title=" logo "><?php echo $SMENU4_CONTACTENT; ?></a></li>
<li><a href="rss.php" title=" flux RSS "><?php echo $SMENU5_CONTACTENT; ?></a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
initMenunew();
</script>
</div>
[/i][/i][/i] Modifié par mussara (22 Sep 2005 - 19:16)