Menü soll nach Klick automatisch schließen

Moin Moin,

ich habe jetzt stundenlang im Netz nach einer Antwort gesucht, aber keine gefunden, die ich umsetzen kann.

Was muss ich ändern, damit mein aufgeklapptes Hauptmenü nach dem Klick auf einen Menüpunkt automatisch wieder zuklappt? Im Moment geht es nur zu, wenn man wieder auf "Menü" klickt. Da die Site für mobile Endgeräte ist und das Menü fest oben am Seitenanfang verankert ist, ist es sehr störend, dass es nicht automatisch zuklappt.

Das Problem scheint das "one-page" zu sein. Verlinke ich auf Seiten, ist es auf der neuen Seite zugeklappt.

Situation:
WP 4.0, Theme "sixteen" - modifiziert als one-page und für mobile Endgeräte
superfish.js, navigation.js vorhanden

http://www.jedryas.de/Sicherhaus/mobil/

Kann mir jemand helfen?

KuniT

 

Hallo Dezanjo, hallo ViableArt,

danke für Eure Antworten. Ich hatte noch andere „Baustellen“, so bin ich erst heute dazu gekommen, mich wieder richtig drum zu kümmern.

Da ich mich mit JS überhaupt nicht auskenne, war ich mit Deiner Antwort, @ ViableArt, „leicht“ überfordert. Habe recherchiert und nun folgende Lösung gefunden:
Mein Theme „sixteen“ hat eine Datei »navigation.js«, in der das Verhalten des Navigationsmenüs für kleine Bildschirme geregelt ist. Die habe ich in meinem Child-Theme unter einem anderen Namen gespeichert und angepasst (die fettgedruckten Zeilen):

( function() {
var container, button, menu;

container = document.getElementById( 'site-navigation' );
if ( ! container )
return;

button = container.getElementsByTagName( 'h1' )[0];
if ( 'undefined' === typeof button )
return;

menu = container.getElementsByTagName( 'ul' )[0];

menu.onclick = function() {
if ( -1 !== container.className.indexOf( 'toggled' ) )
container.className = container.className.replace( ' toggled', '' );
else
container.className += ' toggled';
};

// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
button.style.display = 'none';
return;
}

if ( -1 === menu.className.indexOf( 'nav-menu' ) )
menu.className += ' nav-menu';

button.onclick = function() {
if ( -1 !== container.className.indexOf( 'toggled' ) )
container.className = container.className.replace( ' toggled', '' );
else
container.className += ' toggled';
};
} )();


Anschließend habe ich diese Datei mittels meiner child-function.php eingebunden:

function sixteen_scripts_pet() {
wp_enqueue_script( 'sixteen-navigation', get_stylesheet_directory_uri()."/js/navigation-pet.js");
}

add_action( 'wp_enqueue_scripts', 'sixteen_scripts_pet');