Item du menu Hover JavaScript

Question

Si quelqu'un pouvait m'aider dans la bonne direction, ce serait génial car j'ai cherché une solution à ce problème pendant des heures.

http://jamessuske.com/will/

J'ai un menu avec 3 éléments de menu sur elle. Si vous passez la souris sur les deux derniers éléments de menu, une div avec des éléments d'une liste différente apparaît. Cette partie fonctionne très bien, mais si je passe d'autres éléments de menu à partir d'une autre liste, ils disparaissent à nouveau.

Ceci est mon JavaScript:

<script type="text/javascript"> 

function showGalleryNav(){ 

document.getElementById('headerNavGallery').style.display = ""; 

} 

function showInfoNav(){ 

document.getElementById('headerNavInfo').style.display = ""; 

} 


function hideGalleryNav(){ 

document.getElementById('headerNavGallery').style.display = "none"; 

} 

function hideInfoNav(){ 

document.getElementById('headerNavInfo').style.display = "none"; 

} 

</script> 

Et Le code HTML

<div class="headerNav"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#" onmouseover="javascript:showGalleryNav()" onmouseout="javascript:hideGalleryNav()">Gallery</a></li> 
<li><a href="#" onmouseover="javascript:showInfoNav()" onmouseout="javascript:hideInfoNav()">Info</a></li> 
</ul> 
</div><!--headerNav--> 

<div class="headerNavGallery" id="headerNavGallery" style="display:none;"> 
<ul> 
<li><a href="#">Categoies</a></li> 
<li><a href="#">Products</a></li> 
</ul> 
</div><!--headerNavGallery--> 

<div class="headerNavInfo" id="headerNavInfo" style="display:none;"> 
<ul> 
<li><a href="#">William Ruppel</a></li> 
<li><a href="#">CV</a></li> 
<li><a href="#">Artist Bio</a></li> 
<li><a href="#">Video</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div><!--headerNavInfo--> 

J'ai essayé différents attributs, mais aucun d'entre eux travaillent, j'ai aussi essayé de passer à jQuery avec

$('#headerNavGallery").css("display", ""); 

n'a pas fonctionné,

Toutes les idées seraient grandement apperiated.

Answer 1

Vérifiez que TYPEO, NVM ... Définition de la propriété d'affichage doit toujours avoir une valeur « none » ou « bloc », vide (« ») est une mauvaise remise à zéro ... essayez ceci:

<script> 
    $(".galleryNavToggle").on("mouseenter mouseleave", function(event){ 
    var headNavGal = $("#headerNavGallery"); 
    if(event.type === "mouseenter"){ 
     headNavGal.show(); 
    }else if(event.type ==="mouseleave" && 
      ((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) || 
      $.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){ 
     headNavGal.hide(); 
    } 
}); 
$("#headerNavGallery").on("mouseleave", function(event){ 
    var headNavGal = $(this); 
    if(event.type ==="mouseleave"){ 
     headNavGal.hide(); 
    } 
}); 

</script> 

HTML

<div class="headerNav"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="" class='galleryNavToggle'>Gallery</a></li> 
<li><a href="" class='galleryNavInfoToggle'>Info</a></li> 
</ul> 
</div><!--headerNav--> 

<div class="headerNavGallery" id="headerNavGallery" style="display:none;"> 
<ul> 
<li><a href="#">Categoies</a></li> 
<li><a href="#">Products</a></li> 
</ul> 
</div><!--headerNavGallery--> 

ET CSS

.headerNav{ 
    border:thin solid black; 
    float:left; 
} 
.headerNavGallery{ 
float:left; 
border:thin solid black; 
    margin-left:-1px; 
} 

Answer 2

1) <a href="#" onmouseover="javascript:showGalleryNav()" onmouseout="javascript:hideGalleryNav()">Gallery</a>Il n'est pas nécessaire de spécifier javascript:. C'est redondant.

2) Il fonctionne exactement comme vous l'avez programmé pour fonctionner. Lorsque vous quittez la souris, il disparaît.

3) Vous avez un code pour "headerNavInfo" mais pas de code HTML correspondant.

Answer 3

En fait, ce que vous essayez d'accomplir est tout ce qui est faisable uniquement en css mais pas avec cette structure de balisage. Vous devez d'abord imbriquer vos listes.

<ul class="menu"> 
<li><a href="#">item 1</a></li> 
<li> 
    <a href="#">item 2 with sub</a> 
    <ul> 
    <li><a href="#">sub menu item 1</a></li> 
    <li><a href="#">sub menu item 2</a></li> 
    ... so on .. 
    </ul> 
</li> 
</ul> 

code CSS

.menu li { 
    position: relative; 
} 
.menu li ul { 
    position: absolute; 
    top: 30px; /* the height of the root level item */ 
    display: none; 
} 
.menu li li { 
    position: static; /* or you could float these for horizontal menu */ 

} 
.menu li:hover ul { 
    display: block; 
} 

Ce sont à peu près les bases. Mais je vous suggère fortement d'aller étudier le menu superfish car il est jquery drop drop menu mais il se dégrade bien avec js off, donc vous pourriez juste étudier le css de celui-ci. http://users.tpg.com.au/j_birch/plugins/superfish/