Bonjour,
J'ai construit un petit menu glissant tout simple en CSS et javascript qui fonctionne très bien en HTML, mais sous XHTML il bloque. Le menu est fait en ul, mais en div ou tableau, c'est pareil.
Ce serait sympa si quelqu'un pouvait me donner la raison de ce blocage et suggérer une modification pour le faire fonctionner avec DOCTYPE XHTML ?
Voici le code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu glissant horizontal</title>
<style type="text/css">
*{margin:0;padding:0;border:0;font-family:sans-serif;font-size:1em;font-weight:normal;font-style:normal;text-decoration:none;}
#menu{z-index:20;font-size:10px;text-align:left;padding:5px 0 5px 0; background-color:#8fbc8f; list-style-type:none; position:absolute;top:20px; width:120px; left:-100px;}
#menu .tit{font-size:12px;background-color:blue;color:red;font-weight:bold;}
#menu .stit{background-color:green;font-weight:bold;}
#menu .item{background-color:yellow;}
#menu a:hover{background-color:blue;color:yellow;}
#menu .courriel {background-color:red;color:blue;font-size:12px;font-weight:bold;}
#menu .courriel a:hover{background-color:blue;color:red;font-weight:bold;}
#li_bouton{position:absolute;left:100px;top:0;height:345px;width:23px}
#bouton{height:345px;width:23px;}
</style>
<script type="text/javascript" language="JavaScript">
var flag=0;
var bouton="nav/menu.jpg";
function glisse(){
var Menu=document.getElementById("menu");
if(flag==1){
Menu.style.left=Menu.offsetLeft-10;
if(Menu.offsetLeft<=-100){
flag=0;
return false
}}
else if(flag==0){
Menu.style.left=Menu.offsetLeft+10;
if(Menu.offsetLeft>=0){
flag=1;
return false
}}
setTimeout("glisse()",1);
}
</script>
</head>
<body>
<!-- ******************* MENU ************************************-->
<div id="menu">
<ul>
<li id="li_bouton"><img id="bouton" src="nav/menu.jpg" alt="" onmouseover="glisse()" /></li>
<li class="tit">Titre 1</li>
<li class="item" ><a href="#">link</a></li>
<div class="item" ><a href="#">link</a></li>
<li class="tit">Titre 2</li>
<li class="item" ><a href="#">link</a></li>
<li class="item" ><a href="#">link</a></li>
<li class="item" ><a href="#">link</a></li>
<li class="item" ><a href="#">link</a></li>
<li class="tit">Titre 3</li>
<li class="item" ><a href="#">link</a></li>
<li class="item" ><a href="#">link</a></li>
<li class="item" ><a href="#">link</a></li>
<li class="item" ><a href="#">link</a></li>
<li class="tit">Titre 4</li>
<li class="stit">soustitre</li>
<li class="item" ><a href="#">link</a></li>
<li class="item" ><a href="#">link</a></li>
<li class="stit">soustitre</li>
<li class="item" ><a href="#">link</a></li>
<li class="item" ><a href="#">link</a></li>
<li class="item" ><a href="#">link</a></li>
<li class="stit">soustitre</li>
<li class="item" ><a href="#">link</a></li>
<li class="item" ><a href="#">link</a></li>
<li class="courriel" onmouseover="className='courriel a:hover'">
<a href="mailto:me@home.com">Email</a></li>
</ul>
</div>
<!-- ********************** FIN MENU ************************-->
</body>
</html>