wake-up-neo.com

Wechseln Sie von Hover zu Twenty Twelve Menu

Ich frage mich, wie ich das Menü im zwanzig-zwölf-Thema ändern könnte, um die Untermenüelemente beim Klicken anzuzeigen, anstatt zu schweben.

1
mwz

Menüs können etwas verwirrend sein, da JS und CSS häufig mit verschiedenen Dingen interagieren.

Wenn Sie sich das zwanzigste Thema ansehen, besteht eine schnelle Methode, dies zu erreichen, darin, das hinzugefügte CSS zu entfernen: Zeigen Sie mit der Maus auf die Untermenüs.

In style.css sehen Sie .main-navigation ul li: hover> ul, in Zeile 1.567 .

In Ihrem untergeordneten Design können Sie diesen Selektor einfach entfernen und die anderen beiden Selektoren und alle Eigenschaften beibehalten.

Das deaktiviert: hover, aber dann müssen Sie auch Entscheidungen über das Verhalten der Menüs, Untermenüs und Untermenü-Untermenüs usw. treffen.

Erwarten Sie, dass sich die Untermenüs mit Untermenüs genauso verhalten?

Deaktivieren Sie das oberste Menüelement, das darunter verschachtelt ist?

Möchten Sie einen Umschalter neben dem Menüelement erstellen und den Link auf dem übergeordneten Element anklickbar lassen?

Vielleicht öffnet ein einfacher Klick das Untermenü und ein Doppelklick bringt den Benutzer zur URL?

In Verbindung mit dem Entfernen des CSS von oben kann der übergeordnete Menüeintrag einfach ein benutzerdefinierter Link sein, der zu "#" und der Linktext, wie auch immer der übergeordnete Eintrag sein soll, wechselt.

Twentytwelve enthält JS bereits in der Datei js/navigation.js , in der eine Fokusklasse für das Element umgeschaltet wird. Daher sollte alles für Sie funktionieren, indem Sie nur diese eine CSS-Zeile entfernen und die Menüstruktur ändern.

Wenn dies für Ihre eigene Site oder eine kontrollierte Umgebung ist, ist dies möglicherweise alles, was Sie benötigen. Wenn Sie die Menüstruktur nicht ändern oder eine alternative Lösung für diese Aufgabe suchen, können Sie JS verwenden, um zu verhindern, dass die Links auch beim Klicken verfolgt werden. Dieser Code würde das zulassen und Sie müssten nicht mit Ihrer Menüstruktur herumspielen:

    ( function( $ ) {
        $( '#menu-primary' ).find( '.menu-item-has-children > a' ).on( 'click', function( e ) {
            e.preventDefault();
        });
    } )( jQuery );

Wenn Sie ein neues Thema erstellen, das auf zwölfundzwanzig basiert, sollten Sie auch überlegen, wie andere das Thema verwenden möchten und ob ihre Menüs funktionieren sollen. Sie können Anpassungssteuerelemente erstellen, um das Verhalten von Schwebeflug und Klick umzuschalten und um zuzulassen, dass übergeordnete Menüelemente Verknüpfungen usw. sind.

BEARBEITEN:

Wie würde sich Ihr JS auf Benutzer auswirken, die keine Mäuse verwenden?

Der beste Weg zu sagen ist es, es auszuprobieren! : P

  1. Tastaturnavigation:

Beim Testen dieser Lösung ohne Maus mithilfe der Tastatur kann ich problemlos erfolgreich durch die Menüs, Untermenüs und verschachtelten Untermenüs navigieren. Durch Drücken der Eingabetaste gelangte ich nicht zu den Links von Elementen mit untergeordneten Elementen. Durch Drücken der Eingabetaste beim letzten untergeordneten Element kann der Link jedoch geöffnet werden. Dies scheint so zu funktionieren, als würde ich erwarten, dass die Navigation von einer Tastatur aus funktioniert. Es wäre wahrscheinlich nicht schädlich, die Navigation mit Arien-Labels neu zu schreiben, um Benutzern auf Bildschirmleseprogrammen ein besseres Erlebnis zu bieten und die Navigation mit Pfeiltasten besser zu handhaben, wenn dies für Ihre Site von Belang ist.

  1. Mobile oder Touch-Geräte:

Das Klickereignis wäre das letzte, das für eine Touch-Klick-Simulation ausgelöst wurde. Der Fluss durch Berührungsereignisse wäre:

  • touchstart
  • touchmove
  • touchend
  • mouseover
  • mausbewegung
  • maus nach unten
  • mouseup
  • klicken

Twentytwelve verwaltet bereits die mobilen Menüs beim Touchstart-Ereignis in ihrer Datei navigation.js . Das Aufrufen von preventDefault beim Klicken sollte daher in Ordnung sein, damit es sich auch auf Mobilgeräten verhält.

0
Tim Elsass

Die grundlegende Antwort lautet, dass Sie das Menüelement ändern müssen, um eine Funktion onclick() anstelle einer Funktion onfocus() zu haben. Onfocus() ist das, was passiert, wenn die Maus über das Element bewegt wird. Onclick() passiert, wenn Sie auf das Element klicken.

Wo dies geschieht, hängt vom Themencode ab. Sie müssen sich in den Themencode einarbeiten, der die Menüelemente erstellt, und die Aktion für das Menüelement ändern, das sich auch in einem <form>-Element befinden kann.

Verwenden Sie ein untergeordnetes Thema, damit Sie Ihre Änderungen nicht verlieren, wenn das Hauptthema aktualisiert wird.

0
Rick Hellewell