La liste déroulante CSS apparaît trop rapidement dans IE

Question

J'ai créé un menu déroulant CSS en utilisant suckerfish. Le problème avec cela est lorsque vous cliquez sur l'élément de navigation de niveau supérieur qui vous amène aux pages de catégorie, le pointeur est toujours sur cet élément nav et la liste déroulante apparaît automatiquement dans IE.

C'est bien pour Firefox car la liste déroulante n'apparaîtra pas jusqu'à ce que je bouge la souris, mais IE démarre tout de suite sans aucun mouvement de la souris du tout. Étant donné que les menus sont assez volumineux, l'utilisateur ne sait pas que la page a changé par le passé.

Ce site http://www.foodnetwork.com/ semble réaliser ce que je veux, avec un léger retard avant que la liste déroulante n'apparaisse à nouveau. Je sais qu'ils mélangent avec JS et CSS, mais ne peuvent pas tout à fait travailler sur ce qu'ils font.

Toutes les pensées

Answer 1

Utilisez jQuery de hoverIntent pour atteindre cet effet retard. De plus, le menu reste là même si le curseur sort momentanément du menu. Empêche l'effet de scintillement gênant des menus apparaissant et disparaissant.

Answer 2

lançaient juste ce là-bas, car il peut y avoir autres changements que vous souhaitez que le menu propose ainsi:

Vous pouvez envisager Superfish (une mise à jour/mise à niveau [et peut-être surpuissant alors jetez un oeil] version de Suckerfish), l'un des ajouts est le delay option sur les menus.

Answer 3

J'ai donc trouvé la solution pour cela.

J'ai ajouté le CSS avec JS dans la tête du document et lui ai fixé un petit délai. De cette façon, lorsque l'utilisateur clique sur le lien nav principal, la liste déroulante est cachée par défaut avec le CSS, puis mise à jour avec le CSS qui est écrit avec JS. L'utilisateur voit une page sans le drodown lors du chargement de la page, puis après 1,5 s, la liste déroulante apparaît, montrant ainsi à l'utilisateur la page rechargée.

 
// Add dropdown styles 
     function addDDStyles() { 
      var head = document.getElementsByTagName('head')[0]; 
      var logindiv = document.createElement('link'); 
      logindiv.setAttribute('type', 'text/css') 
      logindiv.setAttribute("rel", "stylesheet"); 
      logindiv.setAttribute("href", ' http://files.stv.claw/css/dropdown.css '); 
      logindiv.setAttribute("media", "screen"); 
      head.appendChild(logindiv); 
     } 
     setTimeout('addDDStyles()', 1500) 

Answer 4

Je sais que vous utilisez actuellement une solution technologique différente à ce problème, mais veuillez au moins jeter un coup d'oeil à ma suggestion avant de la juger. Je ne suis pas assez bon pour l'expliquer tout à fait, alors je vais vous donner quelques points et ensuite faire un lien vers la solution dans le but de vous aider.

Cette solution contient les attributs suivants:

• Aucun script côté client de toute sorte (Javascript) a été utilisé
• navigateur absolu et la compatibilité plate-forme
• texte mise à l'échelle amicale
• manipulation de largeur de la fenêtre étroite
• Fonctionnalité pour navigateur non-CSS ou CSS-désactivé
• Placé dans le public Doma dans

Le site sur lequel le fichier est publié utilise ce menu (il appartient à l'auteur). Alors, s'il vous plaît visitez cette page GRC's Script-Free Pure-CSS Menuing System. J'espère vraiment que cela vous aidera !!