Menü soll nach Klick automatisch schließen

KuniT

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

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Dezanjo

schau dir mal js click events an

ViableArt

Nur in der CSS dann anpassen bzgl. der Open Klasse

$(function() {

initDropDowns($("div.menuclasse"));

});

function initDropDowns(allMenus) {

allMenus.children(".trigger").on("click", function(e) {

e.stopPropagation();

var thisTrigger = jQuery(this),
thisMenu = thisTrigger.parent(),
thisPanel = thisTrigger.next();

if (thisMenu.hasClass("open")) {

thisMenu.removeClass("open");

jQuery(document).off("click");

} else {

allMenus.removeClass("open");
thisMenu.addClass("open");

jQuery(document).on("click", function() {
allMenus.removeClass("open");
});
}
});
}

KuniT

Hallo Dezanjo, hallo ViableArt,

danke für Eure Antworten. Ich hatte noch andere „Ba[size=10]ustellen“, so bin ich erst heute dazu gekommen, mich wieder richtig drum zu kümmern.[/SIZE]

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):

[size=8]( 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';
};
} )();

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

[size=8]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');

[/SIZE]

cmfrank

Hallo Zusammen,

bei meiner Recherche bin ich auf diesen Beitrag gestoßen, auch ich habe das Problem, dass das Menü sich bei der mobilen Darstellung nach dem anklicken eines Menüpunktes wieder schließen soll.
Mein Css Code vom mobile.menu sieht wie folgt aus:

CSS

/* New Mobile menu */
header #menu-mobile {
    padding: 0 !important;
    background: #f1f1f1;
}
header #menu-mobile .logo-mob {
    display: inline-block;
    float: left;
    padding: 15px;
}
header #menu-mobile .toggle-mob {
    display: inline-block;
    float: right;
    padding: 15px;
    font-size: 32px;
    color: #969696;
}
header #menu-mobile .toggle-mob > i {
    cursor: pointer;
}


header #menu-mobile .menu-mob {
    position: absolute;
    top: 0;
    left: -400px;
    width: 60%;
    max-width: 400px;
    min-width: 250px;
    background: #658296;
    padding: 79px 0 0 0;
    z-index: -1;


    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
header #menu-mobile .menu-mob.toggled {
    left: 0 !important;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
header #menu-mobile .menu-mob ul {
    padding: 0;
    list-style: none;
    margin: 0;
}
header #menu-mobile .menu-mob ul.menu li > ul {
    display: none;
    padding: 5px;
}
header #menu-mobile .menu-mob ul.menu li.active > ul {
    display: block !important;
}
header #menu-mobile .menu-mob ul.menu li > ul.sub-menu > li {
    padding: 5px;
}
header #menu-mobile .menu-mob ul.menu li > ul.sub-menu > li a {
    display: block;
}
header #menu-mobile .menu-mob ul.menu > li {
    position: relative;
    text-align: left;
    padding: 10px 15px;
    background: #F1F1F1;
    border-top: 1px solid #261f2f;
}
header #menu-mobile .menu-mob ul.menu > li a {
    color: #696969;
}
header #menu-mobile .menu-mob ul.menu > li.menu-item-has-children:after {
    content: "+";
    position: absolute;
    right: 15px;
    top: 3px;
    padding: 5px;
    color: #696969;
}
header #menu-mobile .menu-mob ul.menu > li a:hover {
    text-decoration: none;
}
header #menu-mobile .menu-mob ul.menu > li.active {
    background: #658296;
}
header #menu-mobile .menu-mob ul.menu > li.active a {
    color: white;
}
header #menu-mobile .menu-mob ul.menu > li.menu-item-has-children.active:after {
    content: "-";
    position: absolute;
    right: 15px;
    top: 3px;
    padding: 5px;
    color: white;
}

Alles anzeigen

Ich habe mich schon etwas eingelesen, bin mir aber noch nicht sicher an welcher Stelle ich etwas anpassen muss und wie :?:

Danke und Gruß
cmfrank

cmfrank

Niemand eine Idee?

Knutella

Vielleicht hilft dir das hier weiter? Mir hat’s geholfen.

https://www.axels-blog.de/bootstrap-mobi…klick-auf-link/

danielgoehr

@Knutella
Es wäre zu hoffen, dass cmfrank bereits eine Lösung gefunden hat. Sein Beitrag ist 3,5 Jahre alt...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Menü soll nach Klick automatisch schließen

Jetzt mitmachen!