Toggle Menu open on click

  • teimo

    (@teimochan)


    vor 7 Jahren, 6 Monaten

    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 Marcus Spanier

    (@espiat)

    vor 7 Jahren, 6 Monaten

    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 7 Jahren, 6 Monaten von Marcus Spanier.
    • Diese Antwort wurde geändert vor 7 Jahren, 6 Monaten von Marcus Spanier.
    • Diese Antwort wurde geändert vor 7 Jahren, 6 Monaten von Marcus Spanier.
    • Diese Antwort wurde geändert vor 7 Jahren, 6 Monaten von Marcus Spanier.
Ansicht von 1 Antwort (von insgesamt 1)
  • Das Thema „Toggle Menu open on click“ ist für neue Antworten geschlossen.