18081 sujets

Questions générales et questions de débutants

Durée d'affichage des sous-menus

j'ai pris le menu suivant http://css.alsacreations.com/modelesmenus/hd2.htm

mais quand je l'applique, les sous-menus restent affichés jusqu'à ce que la souris passe sur un autre lien... Comment faire pour que ceux-ci disparessent automatiquement au bout de x secondes. Car je ne trouve pas (j'suis un vrai novice, dsl).

Merci d'avance.
Modifié par lordbdp (15 Sep 2005 - 16:49)
Merci, mais j'ai essayé de modifié le javascript de base et je me retrouve avec uniquement le menu et en plus
en position verticale, le reste de ma page en plus a disparu...

Je pense qu'il y'a une valeur à modifier : 'smenu'+i mais je ne sais comment faire...

Sachant que le code Java d'origine pour mon menu :
    <script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
        if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
</script>


Comment le modifier correctement ?

Merci.
bon , après plusieurs tentatives, voilà le Javascript que j'ai gardé, il fonctionne, mais maintenant j'ai tous les sous-menus qui restent affichés ensembles...

<script type="text/javascript">
window.onload=function(){dynMenu("menu")}
//active la feuille de style dynamique
document.getElementsByTagName("link")[0].href="e-central.css"

dynMenu = function(idmenu) {planq=0;
mu=document.getElementById(idmenu);
dls = mu.getElementsByTagName("dl");
dds = mu.getElementsByTagName("dd");

if(dds){
  for(var i=0;i<dls.length;i++) {
    dls[i].onmouseover=function(){
      clearTimeout(planq);
      smenu=this.getElementsByTagName("dd")[0]
      if(smenu){cachetout();smenu.style.display="block"}
      }
   dls[i].onmouseout=function(){planq=setTimeout('cachetout()',800);}
   }
  }
}
function cachetout(){for(var j=0;j<dds.length;j++)dds[j].style.display="none";}
</script>
[/i][/i]
Bonjour,
là tu me montres ce que je connait déja : mon script. C'est dans ta feuille de style e-central.css que tu as du oublier,je pense :
#menu dd {display:none}


Je vais ajouter l'info dans ma démo Smiley cligne
Modifié par chmel (19 Sep 2005 - 23:50)
Mon css n'étant pas exactement comme le tien, j'ai essayé de placer la commande {display:none} à différentes lignes de commande menu, et ensuite smenu... sauf qu'au final, si j'ajoute cette ligne, j'ai :
- soit le menu ne s'affiche plus (si je le place dans menu)
- soit mes smenu ne s'affichent plus (si je le place dans smenu)

Et si je n'ajoute pas cette commande, j'obtiens ça :
http://www.e-central.fr/test/test2a.html
Modifié par lordbdp (20 Sep 2005 - 01:55)
Bonjour,

lordbdp a écrit :

mais quand je l'applique, les sous-menus restent affichés jusqu'à ce que la souris passe sur un autre lien... Comment faire pour que ceux-ci disparessent automatiquement au bout de x secondes.


Je sais que ce n'est pas toujours facile de s'interrompre quand on est parti sur une idée qu'on pensait bonne, mais...

...cette temporisation des sous-menus est typiquement une idée à reconsidérer :
- accessibilité réduite : la temporisation empêchera certains utilisateurs d'accéder au contenu des sous-menus
- alourdissement du code et de l'interface si tu veux compenser ce problème : il faut offrir à l'utilisateur la possibilité de désactiver la temporisation, via un lien ou un formulaire, dont la présence va paraître assez étrange...
- ergonomie réduite : le comportement auquel l'utilisateur est habitué est justement la permanence d'affichage des sous-menus (dans les menus de ses applications, par exemple)
Modifié par Laurent Denis (20 Sep 2005 - 04:26)
lordbdp a écrit :
Mon css n'étant pas exactement comme le tien, j'ai essayé de placer la commande {display:none} à différentes lignes de commande menu, et ensuite smenu... sauf qu'au final, si j'ajoute cette ligne, j'ai :
- soit le menu ne s'affiche plus (si je le place dans menu)
- soit mes smenu ne s'affichent plus (si je le place dans smenu)

Et si je n'ajoute pas cette commande, j'obtiens ça :
http://www.e-central.fr/test/test2a.html


Bonjour,
Il faudrai que ton menu soit une liste de définition, et que tu respectes la syntaxe employée Smiley lol
Laurent Denis a écrit :
Bonjour,

Bonjour Laurent, Je me permet de répondre, car je suis aussi concerné pour ce test
Je sais que ce n'est pas toujours facile de s'interrompre quand on est parti sur une idée qu'on pensait bonne, mais...

...cette temporisation des sous-menus est typiquement une idée à reconsidérer :
- accessibilité réduite : la temporisation empêchera certains utilisateurs d'accéder au contenu des sous-menus.

Lesquels ?
- alourdissement du code et de l'interface si tu veux compenser ce problème : il faut offrir à l'utilisateur la possibilité de désactiver la temporisation, via un lien ou un formulaire, dont la présence va paraître assez étrange...

- ergonomie réduite : le comportement auquel l'utilisateur est habitué est justement la permanence d'affichage des sous-menus (dans les menus de ses applications, par exemple)

Pour cela, je comprends, mais beaucoup de menu dynamiques sont fait ainsi, cela évite au visiteur de cliquer dans la page pour cacher les sous-menus au risque d'activer un lien caché ou non.


chmel a écrit :


Bonjour,
Il faudrai que ton menu soit une liste de définition, et que tu respectes la syntaxe employée Smiley lol


Ben je pense avoir respecté... Smiley decu

Exemple que j'utilise :
<div id="haut">
          <div id="menuhaut">
            <ol id="menuhautlist">
<li onmouseover="javascript:montre();"><a href="#" title="Retour à l'accueil" id="current">Accueil</a></li>
   <li onmouseover="montre('smenu2');"><a href="#">Boutiques</a></li>
       <dl id="smenu2">
        <ol>
          <li><a href="perso.html">Personnel</a></li>
          <li><a href="pro.html">Professionnel</a></li>
          <li><a href="humour.html">Humour</a></li>
        </ol>
      </dl>
   <li onmouseover="montre('smenu3');...............


J'ai juste un doute maintenant que tu le dis sur les <ol> et <ol> Smiley ohwell
As tu trouvé la solution pour ton sous menu, parceque le résultat que j'ai vu sur ton site me satisfait tout à fait. Smiley ravi

Si tu pouvais venir poster la solution que tu as trouvé Smiley cligne
chooky a écrit :
As tu trouvé la solution pour ton sous menu, parceque le résultat que j'ai vu sur ton site me satisfait tout à fait. Smiley ravi

Si tu pouvais venir poster la solution que tu as trouvé Smiley cligne


Ben au final je suis reparti sur la CSS de A à Z, j'en ai profiter pour ajouter du code PHP pour les cadres en CSS et je test sur firefox pour une meilleur compatibilité avec Opéra et ie. Le nouveau résultat est sur http://www.e-central.fr/test1.php.

J'ai tellement tout trifouillé dans le code que je ne sais même plus quelle était la modif' finale à faire pour que ça marche... Smiley biggol

Si tu as Firefox tu pourras voir que le CSS n'a rien à voir avec la version de base; ni celle de Michel...

En revanche, dans ma partie HTML j'ai 
<li onmouseover="montre('smenu2');"><a href="#">Boutiques</a></li>
hors je souhaite que si c'est un vrai lien vers une page et non une commande pour afficher un sous-menu... Comment faire pour retirer les commandes <li> et </li> pour que ça marche ?
Modifié par lordbdp (24 Sep 2005 - 02:41)
lordbdp a écrit :


Ben au final je suis reparti sur la CSS de A à Z, j'en ai profiter pour ajouter du code PHP pour les cadres en CSS et je test sur firefox pour une meilleur compatibilité avec Opéra et ie. Le nouveau résultat est sur http://www.e-central.fr/test1.php.

J'ai tellement tout trifouillé dans le code que je ne sais même plus quelle était la modif' finale à faire pour que ça marche... Smiley biggol

Si tu as Firefox tu pourras voir que le CSS n'a rien à voir avec la version de base; ni celle de Michel...

En revanche, dans ma partie HTML j'ai 
<li onmouseover="montre('smenu2');"><a href="#">Boutiques</a></li>
hors je souhaite avoir le pointeur standard sur les commandes qui affichent un sous-menu (et non la main qui désigne un lien)... Comment faire pour retirer les commandes <li> et </li> pour que ça marche ?

Modifié par lordbdp (24 Sep 2005 - 03:01)
Merci pour ton intervention...

Les liens sont brisés Smiley confus

Concernant l'autre post, il ne s'agit pas du même menu, là c'est le menu horizontal avec déroulement vertical que je voudrais faire disparaitre au bout de 1s de onmouseout.

j'ai regardé un peu tous les posts, mais je ne trouve ps mon bonheur. J'en avais vu un la semaine dernière qui correspondait exacvtement à mon souhait, mais impossible de remettre la main dessus. Smiley ohwell

J'ai vu sur ton site un super résultat hier, mais c'était toujour celui en javascript n'est ce pas, c'est pour cela que ton code était hyper lourd?

Moi c'est sur le menu suivant que je galère pour faire disparaitre les sous menu.

http://www.island.sxmsaintmartin.com/rental/
Modifié par chooky (24 Sep 2005 - 16:38)
J'ai tout transféré à la racine et gardé uniquement le nouveau code, faut aller sur http://www.e-central.fr

Je vais jeter un oeil sur ton site pour voir Smiley cligne :
1) ton site n'est bon que pour un affichage en 1024*768
2) faits comme moi, vire le java et mets en CSS ! Tu te prendras moins la tête.
Modifié par lordbdp (24 Sep 2005 - 17:40)
Bonjour Chooky et lordbdp,
Si vous souhaitez faire un menu accessible, les menus doivent rester ouverts comme le préconise Laurent Denis . C'est au visiteur de le fermer si il le souhaîte.
Pour cela il faut modifier le script du tutoriel :

window.onload=montre;
function cachetout(){
  for (var i = 1; i<=10; i++) {
      if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  }
}
function montre(id) {
var d = document.getElementById(id);
cachetout();
if (d) {d.style.display='block';}
}
document.onclick=cachetout

attention chooky, tu as mis 2 fois le code dans ta page
Modifié par chmel (25 Sep 2005 - 08:38)
A Lordbp ->Merci @ toi Smiley cligne

Concernant javascript -> CSS, en fait, c'est pour ça que c'est un peu le waï sur le site, c'est justement parceque je suis en train de tout refondre la version française en CSS + PHP et virer les menu javascripts (à l'image de la version anglaise http://www.island.sxmsaintmartin.com ) Smiley sweatdrop

[edité]Je n'arrivé toujour pas à visualiser ton code depuis le lien étant donné la redirection OVH [/edité]

-> Chmel Merci CHMEL !!!

Concernant 2 fois le code, "c'est normal", je suis en train de refondre le site version Française en CSS, et comme j'utilise des include, je ne pourrais modifier le fichier inclkus que lorsque toutes les pages seront modidiés Smiley ohwell

Concernant, le masquege des sous menus, j'avais déjà lu le post préconisant de garder les menus ouvert. Il y a du vrai et il y a du faut.

Je crois que cela dépend pas mal des internautes ciblés. pour ma part, etant un site touristique, je souhaite assister au maximum l'internaute, et donner un esthétique le plus plaisant possible au site.

C'st pour cela que je souhaiterais vraiment temporiser l'affichage des sous menus. Donc si tu as une solution, ben je suis preneur.

Merci encore
Modifié par chooky (26 Sep 2005 - 15:59)
chooky a écrit :
A Lordbp ->Merci @ toi Smiley cligne

virer les menu javascripts (à l'image de la version anglaise http://www.island.sxmsaintmartin.com ) Smiley sweatdrop

??? je ne voit pas de menu

C'st pour cela que je souhaiterais vraiment temporiser l'affichage des sous menus. Donc si tu as une solution, ben je suis preneur.

Dans ce cas, il faut rajouter des onmouseout partout Smiley ohwell
Merci encore

Bonjour chooky,

Si tu veux réduire le javascript, prends exemple ici
j'ai ajouté des explications.
Sujet clos
Aller à