Sujet Précédent Sujet Suivant

Menu glissant sous html ne fonctionne pas sous DOCTYPE XHTML

Résolu
michof Messages postés 7 Date d'inscription dimanche 10 février 2008 Statut Membre Dernière intervention 19 juillet 2008 - 14 juil. 2008 à 13:57
michof Messages postés 7 Date d'inscription dimanche 10 février 2008 Statut Membre Dernière intervention 19 juillet 2008 - 19 juil. 2008 à 00:19
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>

<!-- ******************* MENU ************************************-->

<li id="li_bouton"></li>
<li class="tit">Titre 1</li>
<li class="item" >[# link]</li>

[# link]</li>
<li class="tit">Titre 2</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="tit">Titre 3</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="tit">Titre 4</li>
<li class="stit">soustitre</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="stit">soustitre</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="stit">soustitre</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="courriel" onmouseover="className='courriel a:hover'">
[mailto:me@home.com Email]</li>

<!-- **********************  FIN MENU ************************-->

</html>
A voir également:

12 réponses

Réponse 1 / 12
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
15 juil. 2008 à 10:03
Bonjour,
même réponse que sur le post
http://www.javascriptfr.com/infomsg_MENU-DEROULANT-INOPERANT-SOUS-FF_1156446.aspx

attendu que les unités pour
les attributs left, top etc... peuvent être des pt, mm, cm, em...ou px
il est nécéssaire de préciser l'unité que tu souhaites.
IE par défaut semble affecter des px et FireFox ne sachant pas ne fait pas...
donc

Menu.style.left = Menu.offsetLeft -10





+"px"

;




Menu.style.left = Menu.offsetLeft +10





+"px"

;








;O)
3
Réponse 2 / 12
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
17 juil. 2008 à 15:29
pase par une condition ( if )

<script type="text/javascript" language="JavaScript">
var flag=0;
var bouton="nav/menu.jpg";
function glisse(){
var Menu=document.getElementById("menu");
if(flag==1){
if(navigator.appName.substring(0,3)=="Micro"){
Menu.style.left=Menu.offsetLeft-10;
}
else{
Menu.style.left=Menu.offsetLeft-15;
}
if(Menu.offsetLeft<=-100){
flag=0;
return false
}}
else if(flag==0){
if(navigator.appName.substring(0,3)=="Micro"){
Menu.style.left=Menu.offsetLeft+10;

}

else{
Menu.style.left=Menu.offsetLeft+15;

}
if(Menu.offsetLeft>=0){
flag=1;
return false
}}
setTimeout("glisse()",1);
}
</script>

le chiffre en rouge c'est lui qu'il faut modifie pour augmenter ou diminue la vitesse
on peut jouer sur le set timeout mais la valeur est au minimum (1 )
3
Réponse 3 / 12
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
17 juil. 2008 à 20:11
c'est pour ca que je trouve ca etrange car j' ai modifie et pour moi ca va tres vite
 
en gros 10px ( px pour pixel )c'est le deplacement par cycle (le programe tourne en boucle par l'intermediaire de setTimeout )dans notre cas  10 pixel donc si je met 20px j'aurait un deplacement par cycle de 20 pixel donc le deplacement sera plus rapide.

Sur le conseil judicieux de PetoleTeam, J'avais modifié
Menu.style.left = Menu.offsetLeft -10+"px"
c'est exacte tu doit metre px certain navigateur accepte qu'il y en ai pas d'autre
en plus  la norme xhtml est tres exigente au niveau de la syntaxe en comparaison au html
3
Réponse 4 / 12
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
18 juil. 2008 à 15:12
Bonjour,
tu peux également jouer avec le délai de
setTimeout, 1 me paraît un peu court...

setTimeout("glisse()",
20);
;O)
3

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 12
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
14 juil. 2008 à 20:34
jour
tu a une ligne ou tu a mis  div a la place de li

[# link]</li>
peut etre qu'en corigeant.......
0
Réponse 6 / 12
michof Messages postés 7 Date d'inscription dimanche 10 février 2008 Statut Membre Dernière intervention 19 juillet 2008
15 juil. 2008 à 01:05
Merci, bien vu ! J'ai corrigé, mais cela ne change rien. J'ai oublié de dire que, en XHTML, cela fonctionne sous IE, mais pas sous Firefox. En HTML, cela fonctionne avec les deux.
0
Réponse 7 / 12
michof Messages postés 7 Date d'inscription dimanche 10 février 2008 Statut Membre Dernière intervention 19 juillet 2008
15 juil. 2008 à 13:16
Génial ! Ca marche. Je n'y avais pas pensé. Un grand merci !!!
0
Réponse 8 / 12
michof Messages postés 7 Date d'inscription dimanche 10 février 2008 Statut Membre Dernière intervention 19 juillet 2008
17 juil. 2008 à 14:45
Bonjour,
Encore un petit souci : Le "glissement" du menu est beaucoup plus lent sous Firefox que sous IE. Est-il possible de résoudre ce phénomène ?
0
Réponse 9 / 12
michof Messages postés 7 Date d'inscription dimanche 10 février 2008 Statut Membre Dernière intervention 19 juillet 2008
17 juil. 2008 à 17:40
Non Kasma, ça ne marche pas. Ca ne fait que shifter le menu de 5 px, mais ca ne résout pas le problème de la lenteur de glisse et de la saccade.
Merci quand même pour le conseil.
0
Réponse 10 / 12
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
17 juil. 2008 à 18:12
je vient d'essayer le script ;il marche nikel pas de sacades j'ai modifie les parametres et j'obtient de grandes vitesses toujour sacades.
0
Réponse 11 / 12
michof Messages postés 7 Date d'inscription dimanche 10 février 2008 Statut Membre Dernière intervention 19 juillet 2008
17 juil. 2008 à 19:23
Bonjour Kasma,
Il y a alors quelque chose qui m'échappe. Je suis nul en Javascript et j'ai besoin d'explications complémentaires.
Quand je modifie les valeurs en rouge, le menu entier shifte horizontalement et la vitesse ne change pas !
Sniff!

Sur le conseil judicieux de PetoleTeam, J'avais modifié
Menu.style.left = Menu.offsetLeft -10+"px"
pour que ça fonctionne avec Firefox sous DOCTYPE XHTML, sinon ça bloque avec FF si je ne mets pas +"px".
0
Réponse 12 / 12
michof Messages postés 7 Date d'inscription dimanche 10 février 2008 Statut Membre Dernière intervention 19 juillet 2008
19 juil. 2008 à 00:19
OK, ca marche nickel. J'avais fait une stupide petite erreur que je n'oserais pas dire ici.
Un grand merci à Kasma et à PetoleTeam !!!
0

Discussions similaires

menu en c
sebz10 -
decricri62 -

4 réponses
qu'est ce que le span en html?
cs_chris81 -
aurelien0306 -

1 réponse
comment créer un sous menu
msi79 -
msi79 -

8 réponses
Fermer les balises html en fin de requete
cs_badben -
Dahevos -

8 réponses
créer un menu principal
cs_valsta -
valsta -

5 réponses
Rejoignez-nous