1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Menü soll nach Klick automatisch schließen

Dieses Thema im Forum "Design" wurde erstellt von KuniT, 19. Januar 2015.

  1. KuniT

    KuniT Active Member

    Registriert seit:
    9. August 2014
    Beiträge:
    29
    Zustimmungen:
    0
    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
     
  2. Dezanjo

    Dezanjo Well-Known Member

    Registriert seit:
    24. Mai 2013
    Beiträge:
    169
    Zustimmungen:
    0
    schau dir mal js click events an
     
  3. ViableArt

    ViableArt Gast

    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");
    });
    }
    });
    }
     
  4. KuniT

    KuniT Active Member

    Registriert seit:
    9. August 2014
    Beiträge:
    29
    Zustimmungen:
    0
    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');

     
  5. cmfrank

    cmfrank Member

    Registriert seit:
    3. November 2013
    Beiträge:
    16
    Zustimmungen:
    0
    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:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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
     
  6. cmfrank

    cmfrank Member

    Registriert seit:
    3. November 2013
    Beiträge:
    16
    Zustimmungen:
    0
    Niemand eine Idee?
     
  7. Knutella

    Knutella New Member

    Registriert seit:
    12. Oktober 2021
    Beiträge:
    1
    Zustimmungen:
    0
  8. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.659
    Zustimmungen:
    121
    @Knutella
    Es wäre zu hoffen, dass cmfrank bereits eine Lösung gefunden hat. Sein Beitrag ist 3,5 Jahre alt...
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden