jQuery Drop-Down-Menü Probleme, platzierte Pfeile auf Menü-Links aber Menü verblaßt, wenn die Pfeile über

schweben Ich habe ein Dropdown-Menü auf meiner Website mit jQuery implementiert und es funktioniert gut, aber ich wollte ein Pfeil auf den Links, die Untermenüs haben. Wenn Sie den Mauszeiger über den Pfeil halten, während Sie "technisch" nicht mehr über das Dropdown-Element schweben, verschwindet das Drop-down-Menü und erscheint wieder. Wie kann ich das umgehen?jQuery Drop-Down-Menü Probleme, platzierte Pfeile auf Menü-Links aber Menü verblaßt, wenn die Pfeile über

HTML:

<nav id="site-navigation" class="main-navigation top-bar" data-topbar role="navigation" style="float:right;" data-topbar> 
<section class="top-bar-section"> 
    <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'nav-menu')); ?> 
</section> 
    <div class="arrow-left-1"></div> 
    <div class="arrow-left-2"></div> 
    <div class="arrow-left-3"></div> 
    <div class="arrow-left-4"></div> 
    <div class="arrow-left-5"></div> 
</nav>

CSS:

.arrow-left-1, .arrow-left-2, .arrow-left-3, .arrow-left-4, .arrow-left-5 { 
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-left: 5px solid #95020a; 
    position: absolute; 
    display: none; 
    z-index: 900; 
} 

.arrow-left-1 { 
    left: 58%; 
    top: 138%; 
}

jQuery:

$('#menu-item-1837').hover(
    function(){ 
     $(this).children('.sub-menu').fadeIn('medium'); 
     $('.arrow-left-1').show(); 
     $('.arrow-left-2').show(); 
     $('.arrow-left-3').show(); 
     $('.arrow-left-4').show(); 
     $('.arrow-left-5').show(); 
    }, 
    function(){ 
     $(this).children('.sub-menu').fadeOut('medium'); 
     $('.arrow-left-1').hide(); 
     $('.arrow-left-2').hide(); 
     $('.arrow-left-3').hide(); 
     $('.arrow-left-4').hide(); 
     $('.arrow-left-5').hide(); 
    } 
);

Quelle

2016-03-24 Anonymous

Übrigens mein Freund: werfen Sie einen Blick hier https://css-tricks.com/examples/jQueryStop/ für die Animation Schlange Problem :) – Tonsenson

Entfernen Sie die hartcodierten Pfeile und fügen Sie :after Pseudo-Element zu Ihrer Klasse menu-item-has-children hinzu.

Sie können den Pfeil entsprechend formatieren.

.menu-item-has-children::after { 
    content: "";  
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-left: 5px solid #95020a; 
    float: right; 
}

Um die hovered- Klasse auszuwählen, wählen Sie wie folgt aus:

.menu-item-has-children:hover::after { 
    border-left-color: white; 
}

Sie here ein kleines Arbeits Beispiel sehen können.

Quelle

2016-03-24 09:56:22

dahin kommen! Sie sind aufgetaucht, es ist nur ein Fall, ihre Position jetzt zu perfektionieren. Es scheint das jQuery Drop-down nicht zu beeinflussen, was perfekt ist. Prost Kumpel. (: –

Genau das, was du brauchst, scheint es! Meine Geige hat die Höhe festgelegt, aber das sollte das geringste Problem sein. –

Rand-Top: -25px sortierte es für mich genau was ich brauchte! Jetzt muss ich nur noch machen Es bleibt also der Pfeil auf dem Drop-Down-Menü, wenn Sie vom Dropdown-Menü zu den Kindern gehen, aber dank Ihrer gründlichen Erklärung glaube ich, dass ich verstehe, wie vor und nach den Selektoren jetzt gearbeitet wird . (: –

könnten Sie verwenden die :after oder :before Selektoren die Pfeile als 'Inhalt' hinzuzufügen, statt ein neues div für jeden erstellen.

http://www.w3schools.com/cssref/sel_after.asp

Edit: Basierend auf Ihren Code sind Sie mit Wordpress - so würde es keine Notwendigkeit, Javascript/jQuery hinzufügen Elemente zu Ihrem Untermenü hinzuzufügen.

Sehen Sie sich den Code an, den WordPress erstellt, und verwenden Sie die bereitgestellten Elemente, um einen CSS-Pfeil hinzuzufügen.

ul.sub-menu li.menu-item-has-children:after { 
content:'>'; 
color:#fff; 
}

Hier ist nur ein kleines Beispiel, aber verwenden Sie es, um Ihre Elemente anzupassen. Hoffe, das hilft

Quelle

2016-03-24 09:38:50

Ich bin nicht sicher, wie dies das Schweben Problem vermeiden würde, obwohl? Kannst du es ausarbeiten? –

Oh Entschuldigung - ich bin immer noch daran gewöhnt - ich dachte, Sie zeigen den Leuten einfach die richtige Richtung an, um ihnen tatsächlich dabei zu helfen, die Antwort herauszufinden, und geben ihnen nicht einfach die richtige Antwort. –

Das ist der richtige Weg zu gehen, aber OP hat eine Menge Chaos in seinem Code, Sie sollten wirklich eine Antwort geben, was zu tun ist, nicht nur was zu verwenden ist. –

Ich denke, Sie haben eine Lösung für das Problem bereits gefunden, weil es scheint auf Ihrer Website in Ordnung zu sein scheint. Wenn nicht, lass es uns wissen.

Quelle

2016-03-24 09:48:38

Es ist nicht für mich? :( – Tonsenson

Noch kein Glück hier, es ist, wenn Sie über die Pfeile im Dropdown-Menü, das ist, wenn es Bugs aus, wie der Cursor nicht mehr über den Pfeil schwebt –

Nun, es muss ein Kompatibilitätsproblem in Ihrem Code sein , weil ich auf der neuesten Version von Chrome bin und die Untermenüs nicht verschwinden, sogar für einen Moment. –

jQuery Drop-Down-Menü Probleme, platzierte Pfeile auf Menü-Links aber Menü verblaßt, wenn die Pfeile über

Antwort

Verwandte Themen