Menu jquery unoszące się w powietrzu

Question

Mam menu, które po kliknięciu myszą nad div pokaże i po wygaśnięciu myszy zniknie. Problem polega na tym, że jeśli przewrócisz którekolwiek z dzieci z menu, menu zniknie (ponieważ technicznie, jeśli masz więcej niż jedno dziecko, to nie jesteś nad rodzicem) czy istnieje sposób, aby przewrócić dzieci liczy się jako mouseout? tutaj jest mój kod: http://jsfiddle.net/32bLg/

Answer 1

Jest to bardzo prosty problem, który większość ludzi ma tendencję do nadmiernego komplikowania z zegarami i specjalnymi kontrolami przypadku. Łatwe rozwiązanie to poprzez znaczniki. Umieść oba cele najeżdżania i menu pod tym samym rodzicielskim, a następnie najedź kursorem na rodzica. Like this. Możesz również użyć wtyczki jQuery hoverIntent, aby uniknąć fałszywych zdarzeń najechania.

Uwaga UX: animacje zanikające trwające ponad 500 ms są po prostu niegrzeczne. Proszę tego nie robić.

Answer 2

Oto proste rozwiązanie: http://jsfiddle.net/32bLg/16/

Answer 3

Sprawdź te ładne przykłady:

Nice JQuery menus

Konkretny wielopoziomowe jeden:

Multilevel JQuery menu

HTML z linkiem 2:

<ul id="nav"> 
    <li><a href="#">1 HTML</a></li> 
    <li><a href="#">2 CSS</a></li> 
    <li><a href="#">3 Javascript</a> 
     <ul> 
      <li><a href="#">3.1 jQuery</a> 
       <ul> 
        <li><a href="#">3.1.1 Download</a></li> 
        <li><a href="#">3.1.2 Tutorial</a></li> 
       </ul> 
      </li> 
      <li><a href="#">3.2 Mootools</a></li> 
      <li><a href="#">3.3 Prototype</a></li> 
     </ul> 
    </li> 
</ul> 

CSS:

#nav, #nav ul{ 
     margin:0; 
     padding:0; 
     list-style-type:none; 
     list-style-position:outside; 
     position:relative; 
     line-height:1.5em; 
    } 

    #nav ul ul{ 
    top:auto; 
    } 

#nav li ul ul { 
    left:12em; 
    margin:0px 0 0 10px; 
    } 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ 
    display:none; 
    } 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ 
    display:block; 
    } 

JS:

function mainmenu(){ 
$(" #nav ul ").css({display: "none"}); // Opera Fix 
$(" #nav li").hover(function(){ 
     $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); 
     },function(){ 
     $(this).find('ul:first').css({visibility: "hidden"}); 
     }); 
} 

$(document).ready(function(){ 
    mainmenu(); 
}); 

Answer 4

Musisz zawierać menu div wewnątrz div hover. Zobacz http://jsfiddle.net/T72jm/2/.

Zauważysz (przynajmniej w Chrome), że jeśli umieścisz kursor nad wskaźnikiem myszy i nie zrobisz nic, podział menu zniknie.

Answer 5

to moja poprawka

window.menushowing = false; 

$('#menu').hover(

function() { 
    window.menushowing = true; 
}, function() { 
    window.menushowing = false; 
    hideMenu(); 
}); 

function hideMenu() { 
    if (window.menushowing) return; 
    $('#menu').animate({ 
     opacity: 0 
    }, 1500, function() { 
     $('#menu').hide(); 
    }); 
} 

$('#examplePic').hover(

function() { 
    window.menushowing = true; 
    $('#menu').css('display', 'block'); 
    $('#menu').animate({ 
     opacity: 1 
    }, 1500); 

}, function() { 
    hideMenu(); 
});