Menü & Untermenü Hover Beide mit separaten Divs

Question

Ich glaube, ich habe den ganzen Tag übergedacht. Es sollte nicht so schwer sein ...

Ich habe ein Div mit dem Hauptmenü es ist Kind mit dem Untermenü. Mein erstes Problem war, dass ich das Untermenü horizontal statt vertikal mit absoluter Positionierung auf dem Bildschirm zeigen wollte, damit ich es dort platzieren konnte, wo ich es haben wollte. Jetzt habe ich dieses Durcheinander, und ich denke, dass ich über die Situation nachgedacht habe.

Ich möchte nur das Untermenü von der Eltern trennen nach dem Schweben über Eltern, dann weiter so lange wie Sie in der Eltern oder Untermenü sind, und fade es aus, wenn Sie entweder verlassen, setzen Sie das Untermenü zurück an das Elternteil. Das Logo wird ausgeblendet, wenn Sie über einem übergeordneten Element mit einem Untermenü verweilen, und wird wieder eingeblendet, wenn das Untermenü ausgeblendet wird. Was es jetzt tut ist im Logo fast egal, was, und es ist wirklich fehlerhaft, wenn Sie im Untermenü schweben, zusammen mit es einfach nicht zu bleiben, wenn Sie manchmal darüber schweben.

Wenn es eine bessere Möglichkeit gibt, dies zu positionieren, damit ich nicht durch dieses Durcheinander gehen muss, oder nur einen besseren Weg insgesamt, bitte weisen Sie darauf hin.

<script type="text/javascript"> 
    jQuery(document).ready(function($){ 
     var inEle = false; 
     var hideTimer; 

     $('.sub-menu li a').css('display', 'inline-block'); 

     // do hover on main menu 
     $('.uk-navbar-nav li a').hover(
      function() { 
       // reset everything on new hover 
       clearTimeout(hideTimer); 

       // fade in the spire logo 
       $('.logoimgcontainer img').stop(true, true).fadeIn(2000); 

       inEle = true; 

       // save the id if there is one to hide 
       var subID = $('body').children('ul[class*="sub-menu"]').attr('id'); 
       // find the ul submenu and put it back on the div in the main menu, remove the placeholder id 
       $('body').children('ul[class*="sub-menu"]').appendTo($(this).parent().parent().find('div[id*="'+subID+'"]')).removeAttr('id'); 
       // fade out the ul submenu 
       $(this).parent().parent().find('div[id*="'+subID+'"]').find('ul').fadeOut(100); 
       // find the div holding the ul submenu and take out its placeholder id 
       $(this).parent().parent().find('div[id*="'+subID+'"]').removeAttr('id'); 

       //show submenu 
       if ($(this).parent().find('div').hasClass('uk-dropdown')) {    
        $('.logoimgcontainer img').stop(true, true).fadeOut(150); 
        $(this).parent().find('div').find('ul').appendTo('body').css({ 
         'display' : 'inline-block', 
         'position' : 'absolute', 
          'left' : '0', 
          'right' : '0', 
          'top' : '90px', 
         'margin' : 'auto', 
         'width' : '300px', 
         'text-align' : 'center', 
         'z-index' : '150' 
        }).attr('id', $(this).text()); 
        $(this).parent().find('div').attr('id', $(this).text()); 
        $(this).parent().find('div').find('ul').fadeIn(1000); 
       } 
      }, function() { 
       // do nothing here mkay 
      } 
     ); 

     // do hover out on main menu 
     $('.uk-navbar-nav li').hover(
      function() { 
       // do nothing here k 
      },function() { 
       // check if this item has a submenu 
       if ($(this).find('div').hasClass('uk-dropdown')) { 
        // clear out the timer 
        clearTimeout(hideTimer); 

        var aID = $(this).find('a').text(); 

        // go ahead and set it not in sub since it hovered out here 
        inEle = false; 

        // reset the timer 
        hideTimer = setTimeout(function() { 
         // make sure its not in the submenu 
         if (!inEle) { 
         //var checkUL = $('ul[id*="'+aID+'"]'); 
         //if (!checkUL.is(":hover")) { 
          // hideTimer = setTimeout(function() { 
           // fade in the spire logo 
           $('.logoimgcontainer img').stop(true, true).fadeIn(2000); 

           // find the ul submenu and put it back on the div in the main menu, remove the placeholder id 
           $('ul[id*="'+aID+'"]').appendTo('div[id*="'+aID+'"]').removeAttr('id'); 
           // fade out the ul submenu 
           $(this).find('div[id*="'+aID+'"]').find('ul').fadeOut(500); 
           // find the div holding the ul submenu and take out its placeholder id 
           $(this).find('div[id*="'+aID+'"]').removeAttr('id'); 

          //}, 1000); 
         }else clearTimeout(hideTimer); // still in the sub menu, clear the timer, handle in submenu 
        }, 1000); 
       } 
      } 
     ); 

     // do hover in the submenu 
     $('.sub-menu').hover(
      function() { 
       // set were in the submenu now 
       inEle = true; 

       // take out the timer for the main menu 
       clearTimeout(hideTimer); 
      }, function() { 
       // dont need the timeout anymore, not in submenu or main menu item 
       clearTimeout(hideTimer); 

       var ulID = $(this).attr('id'); 

       // set were out of the submenu 
       inEle = false; 
       hideTimer = setTimeout(function() { 
        //var checkUL = $('.uk-navbar-nav li a:contains("'+ulID+'")'); 
        //if (!checkUL.is(":hover")) { 
        if (!inEle) { 
         // fade in the spire logo 
         $('.logoimgcontainer img').stop(true, true).fadeIn(3000); 

         // find the ul submenu and put it back on the div in the main menu, remove the placeholder id 
         $('body').find('ul[id*="'+ulID+'"]').appendTo($('.uk-navbar-nav li').find('div[id*="'+ulID+'"]')).removeAttr('id'); 
         // fade out the ul submenu 
         $('.uk-navbar-nav li').find('div[id*="'+ulID+'"]').find('ul').fadeOut(500); 
         // find the div holding the ul submenu and take out its placeholder id 
         $('body').find('div[id*="'+ulID+'"]').removeAttr('id'); 
        }else clearTimeout(hideTimer); // still in the sub menu, clear the timer, handle in submenu 
       }, 1000); 
      } 
     ); 
    }); 
    </script> 

Answer 1

Ich empfehle, mit Klicks statt Hover zu gehen, weil Hover auf mobilen Geräten (aka Touchscreens) nicht funktionieren. Das eigene Menü zu rollen ist so etwas wie das Rad neu zu erfinden. Ich kann einige gute Bootstrap-basierte Templates empfehlen, in denen bereits Menüs eingebaut sind und die sich sogar "magisch" auf mobilen Geräten in Hamburger verwandeln. Aber vielleicht versuchst du zu lernen und ich habe selbst ein paar Menüs geschrieben, und ein Ratschlag, den du bekommen kannst, ist, dass du jQuery verwenden und mouseLeave anstelle von mouseOut verwenden sollst. mouseOut lässt Sie nicht einmal zu Ihrer Auswahlliste gelangen.