Twenty Eleven Theme – Horizontales Menü durch vertikales Menü ersetzen.
Mit dem Plugin “JQuery Vertical Mega Menu” von Lee Chestnutt lässt sich relativ einfach ein vertikales Menü erstellen.
Das Menü soll in der linken Sidebar des Twenty Eleven Theme erscheinen und wird folgendermaßen erzeugt:
- Plugin “Jquery Vertical Mega Menu” installieren und aktivieren.
- Im Dashboard unter Design -> Theme-Optionen das Layout auf die Option “Inhalt rechts” ändern.
- Das Plugin wird unter Design -> Widgets angezeigt. Dieses Plugin in das Feld “allgemeine Sidebar” ziehen. Die anderen Widgets entfernen bzw. in das Feld “inaktive Widgets” ziehen.
- Unter Design -> Menüs lässt sich das Vertikale Menü bearbeiten. In der linken Spalte werden die vorhandenen Seiten aufgelistet. Die Seiten können ausgewählt und dem vertikalen Menü hinzugefügt werden. Die rechte Spalte zeigt das erstellte Menü. Hier können Menüpunkte umbenannt, verschoben und gelöscht werden. Dem Menü kann ein beliebiger Name gegeben werden. Somit können mehrere Menüs in der Widgetleiste verwaltet werden. Mit “Menü erstellen” wird das erzeugte Menü gespeichert.
- Unter Design -> Widgets -> Allgemeine Sidebar kann nun das Styling des “JQuery Vertical Mega Menu” bearbeitet werden. Mit “Speichern” wird das Menü in der linken Spalte der Webseite angezeigt.
Horizontales Menü ausblenden:
Dazu muss die Datei “header.php” im Verzeichnis “wp-content/themes/twentyeleven” bearbeitet werden.
Die Zeilen 128 bis 135 auskommentieren (nur für versierte Entwickler).
ALT:
<nav id=”access” role=”navigation”> <h3><?php _e( ‘Main menu’, ‘twentyeleven’ ); ?></h3> <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?> <div><a href=”#content” title=”<?php esc_attr_e( ‘Skip to primary content’, ‘twentyeleven’ ); ?>”><?php _e( ‘Skip to primary content’, ‘twentyeleven’ ); ?></a></div> <div><a href=”#secondary” title=”<?php esc_attr_e( ‘Skip to secondary content’, ‘twentyeleven’ ); ?>”><?php _e( ‘Skip to secondary content’, ‘twentyeleven’ ); ?></a></div> <?php /* Our navigation menu. If one isn’t filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn’t assigned, the menu with the lowest ID is used. */ ?> <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?> </nav><!– #access –>
NEU:
<!- –
<nav id=”access” role=”navigation”> <h3><?php _e( ‘Main menu’, ‘twentyeleven’ ); ?></h3> <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?> <div><a href=”#content” title=”<?php esc_attr_e( ‘Skip to primary content’, ‘twentyeleven’ ); ?>”><?php _e( ‘Skip to primary content’, ‘twentyeleven’ ); ?></a></div> <div><a href=”#secondary” title=”<?php esc_attr_e( ‘Skip to secondary content’, ‘twentyeleven’ ); ?>”><?php _e( ‘Skip to secondary content’, ‘twentyeleven’ ); ?></a></div> <?php /* Our navigation menu. If one isn’t filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn’t assigned, the menu with the lowest ID is used. */ ?> <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?> </nav> – -> <!– #access –>
