Support » Themes » Toggle Menu open on click

  • Hallo zusammen,

    ich habe ein Problem mit meinem Child-Theme. Das Parent-Theme ist vacation-lite von FlyThemes. Nun aber zu meinem Problem:
    Ich möchte gerne das Toggle-Menu ein wenig anpassen, kenne mich mit JavaScript oder jQuery aber noch nicht wirklich gut aus.
    Also zuerst würde ich gerne die sub-menu-Punkte ausblenden lassen, wenn man auf Menü klickt. Bei den Menüpunkten, bei denen es sub-menu-Punkte gibt, hätte ich gerne einen kleinen Pfeil, der nach unten zeigt. Wenn man dann auf den Pfeil klickt, soll sich das sub-menu mit den jeweiligen Punkten öffnen und auch geöffnet bleiben, solange man sich auf dieser Seite befinden.

    Hier ein Auszug aus dem Code für das Menü:

    <div class="toggle">
    	<a class="toggleMenu active" href="#">Men&uuml;</a>
    </div> 
    
    <div class="nav">
    	<div class="menu-hauptmenue-container">
    		<ul id="menu-hauptmenue" class="menu">
    			<li id="menu-item-1831" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1831"><a href="#">Parent 1</a>
    				<ul class="sub-menu">
    					<li id="menu-item-2145" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2145"><a href="#">Child 1</a></li>
    					<li id="menu-item-2114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2114"><a href="#">Child 2</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div><!-- menu-hauptmenue-container -->                          
    </div><!-- nav -->

    Hier der JavaScript Code des Parent-Theme-Entwicklers:

    // NAVIGATION CALLBACK
    var ww = jQuery(window).width();
    jQuery(document).ready(function() { 
    	jQuery(".nav li a").each(function() {
    		if (jQuery(this).next().length > 0) {
    			jQuery(this).addClass("parent");
    		};
    	})
    	jQuery(".toggleMenu").click(function(e) { 
    		e.preventDefault();
    		jQuery(this).toggleClass("active");
    		jQuery(".nav").slideToggle('fast');
    	});
    	adjustMenu();
    })
    
    // navigation orientation resize callbak
    jQuery(window).bind('resize orientationchange', function() {
    	ww = jQuery(window).width();
    	adjustMenu();
    });
    
    var adjustMenu = function() {
    	if (ww < 1000) {
    		jQuery(".toggleMenu").css("display", "block");
    		if (!jQuery(".toggleMenu").hasClass("active")) {
    			jQuery(".nav").hide();
    		} 
    		else {
    			jQuery(".nav").show();
    		}
    		jQuery(".nav").unbind('mouseenter mouseleave');
    	} 
    	else {
    		jQuery(".toggleMenu").css("display", "none");
    		jQuery(".nav").show();
    		jQuery(".nav li").removeClass("hover");
    		jQuery(".nav li a").unbind('click');
    		jQuery(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
    			jQuery(this).toggleClass('hover');
    		});
    	}
    }

    Ich hoffe, mir kann hier jemand helfen. Habe schon verschiedene Wege versucht und in Google gesucht, aber finde nichts, was wirklich funktioniert.

    Danke im Voraus!

    LG

Ansicht von 1 Antwort (von insgesamt 1)
  • Moderator espiat

    (@espiat)

    Lösungsansatz:

    Du blendest per media query im CSS die Child’s aus:

    @media screen and (max-width:719px){
    .header .header-inner .header-bottom .nav ul li ul{
    display:none;
    }
    }

    Dann per CSS noch den Pfeil ran, wenn der Parentmenüpunkt die Klasse „.menu-item-has-children“ besitzt.

    Dann per jquery die ebene einblenden, damit die subs eingeblendet werden, als Beispiel:

    $('.nav ul li')
    .css({cursor: "pointer"})
    .on('click', function(){
      $(this).find('ul').toggle();
    })
    • Diese Antwort wurde geändert vor 1 Jahr, 5 Monate von  espiat.
    • Diese Antwort wurde geändert vor 1 Jahr, 5 Monate von  espiat.
    • Diese Antwort wurde geändert vor 1 Jahr, 5 Monate von  espiat.
    • Diese Antwort wurde geändert vor 1 Jahr, 5 Monate von  espiat.
Ansicht von 1 Antwort (von insgesamt 1)
  • Das Thema „Toggle Menu open on click“ ist für neue Antworten geschlossen.