Das Plug-in jQuery Vertical Accordion Menü

Bild © Markus Waltenberger

Das Plug-in jQuery Vertical Accordion Menü hat für Monitore mit Mausbedienung über das Missfallen des Hover-Effekts bei Akkordeon Menü zum Erfolg geführt.

Erst durch deaktivieren des Plug-in Superfish-Menü konnte es auf Monitor mit Mausbedienung zur konformen Darstellung gereichen. Zu bemerken, hier am iPad allein, abgesehen der Vorgabe von Designs (und deren Anpassungsmöglichkeit im Plugin-Editor) – hat die technische Möglichkeit der vorhergehenden Beschreibung zum Menü zwischen Plugin Superfish und WP-SAMW ebenso getaugt.

Nach aktivieren des Plug-ins, ist jQuery Vertical Akkordion Menü durch Widget (Dashboard/Design/Widget) vorhanden und bestens zur Konfigurierung vorbereitet (gleich Widget „Individuelles Menü“).

Gebrauchsanweisung (Übersetzung  Google)

Bevor das Akkordeon-Menü zu konfigurieren ist, benötigt es eines WordPress benutzerdefinierten Menüs – entweder ein bestehendes Menü oder der Einrichtung eines Kontos über den Menüpunkt in WordPress admin.

Das jQuery Accordion Menu Widget auf den Inhalt-Widget-Bereich ziehen und aus dem Dropdown-Menü ein vorhandenes Menü anklicken.

Das Akkordeon-Menüs kann entweder mit dem Widget und Zuordnung von einem WP-Menü oder mit Kurzwahlnummern (verfügbar ab Version 3.0) hinzugefügt werden,

Hinweis: Für den Akkordeon-Effekt muss das Menü mindestens 2 Ebenen haben.

Anmerkung zum Erstellen:

  • Für jQuery Vertical Accordion Menü, siehe Einstellung Pkt. (4) Deaktivieren von Elternteilverbindungen.

Das Menü (Dashboard/Menü) wird erstellt, indem entweder die Hauptseite allein besteht und selbige sich bei anklick‘ öffnet (ohne Akkordion, da diese Seite sich ohnehin selbst darstellt) oder bei Menü mit Submenü einer „extra Hauptseite“ (eine Blindseite in „Seiten“ generiert, z. B. „Zum Gebrauchs Menü“) und entsprechend betitelt, mit zugehörigen Subseiten konfiguriert wird. Dadurch wird bei anklick‘ der Hauptseite („Zum Gebrauchs Menü“) diese nicht geöffnet, sondern das Akkordion lässt die eigentlichen Seiten (das Submenü) vorerst darstellen.

Fazit: Das Konforme dabei ist, dass sich durch „Deaktivieren von Elternteilverbindungen“ mit anklick‘ der Überschrift erst das Submenü öffnet und aus diesem gewählt werden kann – gegensätzlich des sofortigen Aufrufs der Hauptseite mit geöffnetem Submenü.

Einstellung:

Beispiel Menüeinstellung

Click oder Hover

  • (1) Auto Close  – Offene Menüs selbstschließend. Ein Klick auf einen neuen Haupt-Menüpunkt schließt das vorhergehende Submenü.
  • (2) Save Menu State – Menüzustand speichern (verwendet Cookies). Das entsprechende Submenü bleibt auf neuer Seite geöffnet. Das ist nicht so praktisch, weil dadurch das geöffnete Menü auch aklick‘ anderen Haupt-Menüpunkt, geöffnet weitergeleitet wird.
  • (3) Auto Expand … Auto basierend auf Aktuelle Seite / Beitrag. Das Menü des inhärenten WordPress-Menüsystem zur Identifizierung der aktuellen Seite, um hiermit automatisch die Untermenüs geöffnet darzustellen, welches die aufgerufene Seite/Beitrag beinhaltet. Das ist nützlich, wenn ein Benutzer die Webseiten durchsucht, auch die über andere Verbindungen sind. – Bewirkt also ähnlich, wie oben, „Menüzustand speichern“, aber praktischer erscheint, ebd.
  • (4) Disable Parent Links – Deaktivieren von Elternteilverbindungen. Wenn diese Option ausgewählt, wird der Haupt-Menüpunkt von Kind-Elementen als Link deaktiviert und wird durch anklicke, nur entsprechendes Untermenü öffnen/schließen. Dieses ist also nicht zu wählen, wenn die Seite dieses Haupt-Elements zu sehen sein soll. – Für den Zweck einer Hauptseite (Haupt-Menüpunkt) bietet sich die Erstellung einer Extra-Seite, welche jeweils im Menü als Hauptseite eingefügt und mit zugehöriger Überschrift angeglichen wird. Des weitern Konforme dieser Option ist, wenn kein Kind-Element vorhanden ist, wird entsprechende Seite dennoch geöffnet und also sind Menüpunkte möglich, die kein Submenü haben. (S. Tab, Gebrauchsanweisung: „Anmerkung zum erstellern Menü“. )
  • (5) Close Menu – Schließen des Menüs alleinig über Mauszeiger (Hover). Das Menü schließt automatisch nach 1 Sekunde, wenn sich die Maus vom Menü bewegt – nur verfügbar, wenn Ereignistyp „schweben“ (Hover).
  • (6) Show Count. Zeigt unter jedem Haupt-Menüpunkt die Anzahl der Submenülinks.
Menü-Klasse:

Wenn man eigenes Menü schaffen will, dazu mehr Kontrolle über das Menü Styling werden hier die eigenen CSS-Klassennamen eingeben. Wenn man über diese Einstellung nicht sicher ist oder um die Standard-WordPress-Klasse (Menü) zu verwenden, dieses Feld leer lassen.

Klasse deaktivieren:

Die CSS-Klasse aller Elternmenüpunkte eingeben, die deaktiviert sein sollen – um eine benutzerdefinierte CSS-Klasse des „menu-disable“ in die WordPress-Menü-Editor-Seite hinzufügen, um einen Menü-Link zu Öffnen/Schließen, kein „menu-disable“ auf diesem Gebiet eingeben. Das Feld leer lassen, wenn alle Menüpunkte und die Akkordeon Funktionen verwendet wird.

Hover Verzögerung:

Diese Einstellung fügt eine Verzögerung des Hovers hervor, um das versehentliche Öffnen/Schließen des Menüs zu verhindern. Eine höhere Zahl bedeutet, den Cursor nicht mehr länger bewegen, bevor das Menü die Aktion auslöst.

Animation Geschwindigkeit:

Die Geschwindigkeit, mit der das Menü öffnet/schließt.

Skin:

Mehrere Proben Skins/Designs stehen zur Verfügung, um Beispiele für CSS, die verwendet werden können, um dem Akkordeon-Menü einen Stil zu geben.

Skin Features, Menülink der geöffneten Seite hervorheben:

[Gelöst] Hinzufügen von Stil zu aktiven Link 

Wenn es also gern gesehen ist, den Link der geöffneten Seite akzentuieren. Dashboard/Plugins/Editor „Zu bearbeitendes Plugin wählen“:  jQuery Vertical Accordion Menu und jeweiliges jquery-vertical-accordion-menu/skins/bspw.css aufrufen und dazugehörend Schnipsel anfügen:

/*Menü nur Schrift, aktive Menüpunkte hervor heben */
#dc_jqaccordion_widget-%ID%-item li.current_page_item a{color:#ba7924; font-weight: bold;}

/*Menü mit Images (Pfeil), aktive Menüpunkte hervor heben*/
#dc_jqaccordion_widget-%ID%-item ul ul a.active{color:#a85b21; font-weight: bolder;}

Durch folgende  Auszeichnungen (blau) im Plugin Editor, am Ende des Codes von jquery-vertical-accordion-menu-skins/bspw.css, wird im Menü der Menütext durch hovers bzw. anklicke hervor gehoben:

#dc_jqaccordion_widget-%ID%-item ul a:hover {background: #a4d3ee; color: #5f89a1; font-weight: bolder;}

Die Attributwerte individuell anpassen.

Des Weiteren: Index of /wp-content/plugins/jquery-vertical-accordion-menu/skins

Obigen Hinweises, die  images/, werden auch verschiedene Pfeilzeichen (.gif oder .png) für das Menü angeboten. Die vorhandenen Pfeile lassen sich via Plugin Editor verändern, z. B. „jquery-vertical-accordion-menu/skins/grey.css“ folgenden Code auswechseln.

Siehe bitte nächsten Tab, Beispiel skins/grey.css

skins/grey.css (originär)
/*Original gray*/
#dc_jqaccordion_widget-%ID%-item{font: bold 14px Arial, sans-serif; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc;}

#dc_jqaccordion_widget-%ID%-item ul, #dc_jqaccordion_widget-%ID%-item ul li {margin: 0; padding: 0; border: none; list-style: none;}

#dc_jqaccordion_widget-%ID%-item ul a {padding: 10px 10px 10px 50px; background: #ececec; text-decoration:none; display: block; color: #333; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; position: relative; text-shadow: 1px 1px 1px #fff;}

#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent, #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent:hover {background: #D7D4D4 url(skins/images/bg_grey.png) repeat-x 0 -1px;}

#dc_jqaccordion_widget-%ID%-item ul a .dcjq-icon {position: absolute; top: 50%; left: 14px; width: 34px; margin-top: -17px; height: 34px; background: url(skins/images/arrow_grey_right.png) no-repeat 0 center;}

#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active .dcjq-icon {background: url(skins/images/arrow_grey_down.png) no-repeat 0 center;}

#dc_jqaccordion_widget-%ID%-item ul a:hover {background: #fff; color: #990000;}
Hervor gehoben, Pfeile anderer Stil /skins/grey.css:

Anmerkung: skins/images/, für die geöffnete Darstellung des Menüs (Pfeil nach unten zeigend) kann man dem arr_white.gif ein v einzufügen, also  arrv_white.gif

#dc_jqaccordion_widget-%ID%-item ul a .dcjq-icon {position: absolute; top: 50%; left: 14px; width: 34px; margin-top: -17px; height: 34px; background: url(skins/images/arr_black.gif) no-repeat 0 center;}

#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active .dcjq-icon {background: url(skins/images/arr_white.gif) no-repeat 0 center;}
Des weiteren Anpassungen, z. B.:
/*---Neu Gray---*/
#dc_jqaccordion_widget-%ID%-item{font: /*bold*/ 14px Lato, sans-serif; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc;}

#dc_jqaccordion_widget-%ID%-item ul, #dc_jqaccordion_widget-%ID%-item ul li {margin: 0; padding: 0; border: none; list-style: none;}

#dc_jqaccordion_widget-%ID%-item ul a {padding: 10px 10px 10px 45px; background: #92BCD4; text-decoration:none; display: block; color: #c9ebff; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; position: relative; /*text-shadow: 1px 1px 1px #fff;*/}

#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent {background: #789AAE; color: #fff; font-weight: bold;} 
#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent:hover {background: #5F89A1; color: #fff; url(skins/images/bg_grey.png) repeat-x 0 -1px;}

#dc_jqaccordion_widget-%ID%-item ul a .dcjq-icon {position: absolute; top: 50%; left: 14px; width: 34px; margin-top: -17px; height: 34px; /*background: url (skins/images/arr_black.gif) no-repeat 0 center;*/}

#dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active .dcjq-icon {background: url(skins/images/arr_white.gif) no-repeat 0 center;}

#dc_jqaccordion_widget-%ID%-item ul a:hover {background: #fff; color: #a85b21;}

/*Menü mit Images (Pfeil), aktive Menüpunkte hervor heben*/
#dc_jqaccordion_widget-%ID%-item ul ul a.active{color:#a85b21; font-weight: bolder;}