MouseOver-Klasse entfernen MouseOut-Wiederherstellungsklasse

Question

Ich versuche also, ein kleines Skript zu finden, um die Klasse im aktiven Menüelement zu entfernen, wenn ich den Mauszeiger über andere Menüelemente bewege. Aber stellen Sie es wieder her, wenn ich mich vom Navigationsgerät entferne. Der schwierige Teil besteht darin, sicherzustellen, dass das Skript nicht ausgelöst wird, wenn das aktuell aktive Element ein aktives Untermenü enthält.

So haben wir zum Beispiel 4 Menüpunkte (Main 1, Main 2, Main 3, Main 4). Zwei haben Untermenüs (Main 2, Main 4). Main 1 ist derzeit aktiv und hat eine Klasse namens active. Wenn Sie mit der Maus über Main 2 fahren, wird das Untermenü angezeigt und Main 2 hat eine Hover-Klasse und eine Hilite-Klasse, wenn Sie den Mauszeiger über das Untermenü bewegen. Jetzt ist Main 1 wieder im normalen Bestand. Jetzt entfernen Sie sich vom Navi und Main 1 hat wieder eine aktive Klasse und Main 2 sieht wie normal aus

Nehmen Sie nun das gleiche Setup und aktivieren Sie Main 2, wobei das Untermenü standardmäßig angezeigt wird. Wenn Sie mit der Maus über Main 1 Main 3 Main 4 fahren, wird das Untermenü geschlossen und die aktive Klasse auf Main 2 wird entfernt. Wenn Sie sich jedoch entfernen, wird sie wieder aktiv und zeigt ihr Untermenü an. Wenn Sie jetzt mit der Maus über Main 2 oder dessen Untermenü fahren, ändert sich die Klasse nie und bleibt gleich.

Ich habe weit und breit nach einem ähnlichen Setup gesucht und kann nur das finden, was ich zu einer früheren Frage gepostet habe. hier Ich habe alle meine Sachen geworfen und zum Glück die stopPropagation (), die mich denken lässt, dass dies der falsche Code für dieses Projekt ist, aber es hat an einem funktioniert ganz anderes Projekt. Ich habe eine zweite Frage dazu gestellt, weil ich nicht sicher war, ob ich auf der anderen Seite posten könnte, wenn sie bereits als beantwortet markiert war.

Vielen Dank im Voraus und ich hoffe, ich bekomme Hilfe,
Tyler

BEARBEITEN: Hier ist ein Link zum alten Skript auf jsfiddle hier AKTUALISIERT: 30.04.2011

Answer 1

Beachten Sie, dass dies nur unter WordPress
funktioniert Bitte veröffentlichen Sie Änderungen auf jsfiddle und nicht auf diesem Code, es sei denn, es ist wichtig

Ok, wir haben endlich ein Arbeitsmenü. Ich habe ernsthaft gesucht und eine Lösung gefunden. Jetzt bin ich mir nicht sicher, ob es richtig ist oder nicht, aber es funktioniert so, wie ich es will. Wenn jemand es benutzen will, fühle dich frei. Es wird mit WordPress verwendet, daher habe ich die Funktion, ein paar Codezeilen hinzuzufügen, und werde dies auch unten veröffentlichen.

Hier ist die Funktion, die ich zu WordPress hinzugefügt habe:

function additional_active_item_classes($classes = array(), $menu_item = false){

    if(in_array('current-menu-item', $menu_item->classes)){
        $classes[] = 'active active-menu';
    }
    return $classes;
}  
add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 );

Der obige Code gilt für WordPress 3.0+

Dadurch wird dem aktuellen Menüpunkt eine Klasse hinzugefügt

Bisher habe ich mit der jQUERY eine Art Cluster hinzugefügt, und es gibt wahrscheinlich eine Möglichkeit, alles zusammenzuführen und als eine Einheit zu verwenden, aber ich weiß nicht, wie ich das machen soll, aber ich werde den Code hier und dann posten eine Demo zu jsfiddle

Hier ist das jQUERY-Skript, das ich zusammengesetzt habe und das den in der Demo gefundenen Effekt hinzufügt:

Dies fügt allen übergeordneten und nicht übergeordneten Elementen eine nicht aktive Klasse hinzu:

$('*:not(li) > ul#navbar > li').addClass('not-active');

Dies fügt allen ul-Untermenüs eine .child-Menüklasse hinzu:

$('ul.sub-menu').children().addClass('child-menu');

Hiermit wird dem ersten untergeordneten Element in jedem Untermenü eine Klasse für das erste untergeordnete Element hinzugefügt (für zusätzliches Styling hinzugefügt):

$('#navbar ul.sub-menu :first-child').addClass('first-child');

Dies fügt dem letzten untergeordneten Element in jedem Untermenü eine .last-child-Klasse hinzu (hinzugefügt für zusätzliches Styling):

$('#navbar ul.sub-menu :last-child').addClass('last-child');

Dadurch wird die Klasse .not-active in einem aktiven Menü umgeschaltet (entfernt .not-active für das letzte Skript unten):

$("#navbar li.active").toggleClass("not-active");

Hiermit wird die Klasse .not-active in einem aktiven untergeordneten Menü umgeschaltet (entfernt .not-active für das letzte Skript unten):

$('#navbar ul.sub-menu li.active').toggleClass("not-active");

Dies fügt eine .parent-active-Klasse hinzu, wenn .current-menu-parent vorhanden ist:

$('ul#navbar li.current-menu-parent').addClass('parent-active');

Dies fügt eine .child-aktive Klasse hinzu, wenn li.current-menu-parent ul.sub-menu vorhanden ist:

$('ul#navbar li.current-menu-parent ul.sub-menu').addClass('child-active');

* Dadurch wird dem übergeordneten Element eine .hilite-Klasse hinzugefügt, wenn Sie den Mauszeiger über das untergeordnete Menü bewegen: *

$('#navbar li').hover(
    function() {
        $(this).parents('li').children('a').addClass('hilite');
    },
    function(){
        $(this).parents('li').children('a').removeClass('hilite');
    }
);

Dies entfernt die .active-Klasse eines aktiven Menüs, wenn Sie den Mauszeiger über andere Menüelemente bewegen, wird jedoch nicht verwendet, wenn Sie den Mauszeiger über das aktive Element oder die untergeordneten Elemente des aktiven Elements bewegen:

$('#navbar li.not-active').hover(
    function() {
        $('#navbar .active').removeClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').removeClass('parent-active child-active');
    },
    function() {
        $('#navbar .active').addClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').addClass('parent-active child-active');
   }
);

Nachdem wir nun die jQUERY haben, können wir CSS und HTML als Referenz verwenden.

Hier ist das CSS:

/*Main position of menu*/
#navigation{float: left; margin: 5px 0 15px; padding: 0; position: relative;  width: 100%}
/*First UL tag for menu*/
ul#navbar{margin: 0; padding: 0; font-size: 96%; height: 20px; background: #009AD9}
/*Sets style for each LI tag and sets effects*/
#navbar li{float: left; list-style: none; text-transform: uppercase; font-weight: bold}
#navbar li a{display: block; text-decoration: none; color: #fff; padding: .24em .8em; line-height: normal}
#navbar li:hover a:hover, #navbar li a.hilite{background: #fff; color: #000}
#navbar li.active-menu a{background: #fff; border-top: 2px solid #B70F0F; padding-top: .063em; color: #666}
/*Sets parent active when child is active*/
#navbar li.parent-active a{background: #fff; color: #666}
/*Sets child-menu to not display when not-active*/
ul.sub-menu{display: none}
/*Sets the position of child menu using first-child (leave to avoid conflict with other style's)*/
#navbar li ul.sub-menu li.first-child{margin-left: -0.375em}
/*Sets child as visible on parent hover*/
#navbar li:hover ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child as visible when parent is active menu*/
#navbar li.active-menu ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child menu active when active item is inside of child menu*/
ul.child-active{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}
/*Sets style of child links*/
#navbar li ul.sub-menu li a{display: block; text-decoration: none; padding: 0 .5em; line-height: normal}
/*Sets various child link styles*/
ul.sub-menu li a{color: #666!important}
ul.sub-menu li a:hover{color: #000!important}
li.active-menu ul.sub-menu a{border-top: none!important; padding: 0 .5em!important}
#navbar li.current-menu-parent:hover ul.sub-menu{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}

Es sollte ziemlich einfach zu lesen sein

Hier ist das HTML:

<div id="navigation">
    <ul id="navbar">
        <li class="not-active"><a href="#">Main 1</a></li>
        <li class="active active-menu"><a href="#">Main 2</a>
            <ul class="sub-menu">
                <li class="child-menu first-child"><a href="#">Sub 1</a></li>
                <li class="child-menu"><a href="#">Sub 2</a></li>
                <li class="child-menu last-child"><a href="#">Sub 3</a></li>
            </ul>
        </li>
        <li class="not-active"><a href="#">Main 3</a></li>
        <li class="not-active"><a href="#">Main 4</a>
            <ul class="sub-menu">
                <li class="child-menu first-child"><a href="#">Sub 4</a></li>
                <li class="child-menu"><a href="#">Sub 5</a></li>
                <li class="child-menu last-child"><a href="#">Sub 6</a></li>
            </ul>
        </li>
    </ul>
</div>

Sie können diesen Code gerne verwenden. Wenn Sie eine einfachere Möglichkeit finden, alle diese Skripte zu gruppieren, tun Sie dies bitte.

Sie können eine Live-Demo hier unter JSFIDDLE sehen