Hilfe beim Menutemplate

Hilfe zu Modulen und Tags
Post Reply
wilderpel
Forum Members
Forum Members
Posts: 58
Joined: Sat Jan 10, 2009 2:44 pm
Location: Asperg

Hilfe beim Menutemplate

Post by wilderpel »

Hallo,

ich bräuchte eure Hilfe beim Aufbau eines Menüs für eine CMSms-Website. Das Menü hat bis zu 3 Ebenen (in Menu Manager heißen die, glaub ich, Levels). Die erste Ebene ist immer zu sehen, die 2. Ebene fährt per JS mit einem Klick auf die übergeordnete heraus. Das klappt soweit auch. Allerdings musste ich für den JS-Effekt im Menutemplate die hrefs für alle Elemente die children haben, auf "#" setzen.
Damit werden aber leider auch die hrefs für die Elemente auf zweiter Ebene, die children haben, auf "#" gesetzt, was ich aber nicht möchte, denn die Punkte auf 3. Ebene sollen anders präsentiert werden.
Schaut's euch einfach mal an, dann kann man's besser verstehen: klick (bei den Seiten "Pfarrverwaltung" -> "Ausschüsse" seht ihr, wie es eigentlich aussehen soll, allerdings habe ich da geschummelt und so kann man es nicht lassen^^ Bei den Seiten "Test" und "Test2" seht ihr, wie es ungeschumelt zu Zeit läuft. Die Punkte "haschildren" auf den 2. Ebenen haben jeweils Unterpunkte, allerdings kommt man zu denen nicht hin, weil der Link immer nur "#" ist.)
Ich hoffe mal, man konnte das soweit verstehen, mein Problem ist also, dass die Punkte im Menü, die auf zweiter Ebene sind und children haben, als Ziel immer nur "#" haben, was aber nicht so sein soll.
Mein Menütemplate sieht folgendermaßen aus:

Code: Select all

<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

	{repeat string='<ul class="unterpunktliste">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}

	{repeat string='<div class="child-unten"></div></li></ul>' times=$node->prevdepth-$node->depth}
	</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
	<li class="menuparent-aufgeklappt"><a class="menuactive menuparent" href="#"
{elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent{$node->hierarchy}" href="#" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />
{else}
	<li><a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}

{/foreach}

	{repeat string="</li></ul>" times=$node->depth-1}		</li>
	</ul>
<div class="clearb"></div>
</div>
{/if}
Ja, ich weis, im Quellcode stehen dann später immer 2 hrefs im a-Tag, aber damit kann ich eigentlich leben :D
Meine Frage nun:
Wie bekomme ich es hin, dass die Oben beschriebenen Menüpunkte ihr richtiges Ziel ({$node->url}) erreichen und nicht "#"? Ich hatte es mal so probiert, aber das hat nicht geklappt: (kenne mich mit diesem Menu Manager nicht so aus)

Code: Select all

{elseif $node->haschildren == true and $node->depth == 2}
	<li class="menuparent"><a class="menuparent{$node->hierarchy}" href="{$node->url}" 
Würde mich sehr freuen, wenn einer helfen kann, und bitte sagt's einfach, wenn meine Erklärungen unverständlich sind ^^
NaN

Re: Hilfe beim Menutemplate

Post by NaN »

Ich würde die href-Attribute überhaupt nicht verändern.
Stattdessen würde ich mit jQuery prüfen, welche Klasse/ID der angewählte Link hat und als Rückgabewert entweder false liefern (dann sollte die Addresses des Link nicht geladen werden) oder eben true.

Somit hast Du weder doppelte hrefs noch Rautezeichen als href. (Und damit läuft die Seite auch ohne Javascript!)
Ich hoffe Du verstehst was ich meine.

Also alle Links im Menu durchgehen, wenn sie eine bestimmte Klasse/ID haben, ihnen eine bestimmte Funktion zuordnen und in dieser dann entscheiden ob der Link ausgeführt wird oder der Ausklappeffekt.
wilderpel
Forum Members
Forum Members
Posts: 58
Joined: Sat Jan 10, 2009 2:44 pm
Location: Asperg

Re: Hilfe beim Menutemplate

Post by wilderpel »

Erstmal vielen Dank.

Ich verstehe, diese Lösung wäre wirklich sehr komfortabel.

Die Links die animiert werden sollen haben alle die Klasse menuparentX und die, die ncht animiert werden sollen, bei denen also die Adresse geladen werden soll, haben die Klasse menuparentX.Y oder gar keine Klasse. X bzw. Y ist von Link zu Link unterschiedlich.
Wie wprde man das dann realisieren mit der jQuery-Überprüfung? Ist das kompliziert? Bin in jQuery nämlich noch nicht so gut eingearbeitet.
NaN

Re: Hilfe beim Menutemplate

Post by NaN »

Bin auch nicht so fit in jQuery aber wenn ich Dich richtig verstanden habe, dann brauchst Du nur das hier:

Code: Select all

$(document).ready(function() {
	$("#menuwrapper ul li.menuparent a.menuparent").click(function () {
		$(this).parent().find("ul:first").slideToggle("fast");
		return false;
	});
	$("#menuwrapper ul li.parent a.parent").click(function () {
		$(this).parent().find("ul:first").slideToggle("fast");
		return false;
	});
});
Somit wird allen Links, die noch Untermenüs haben, eine Funktion zugewiesen, die auf das "click Event" reagiert.
Ist quasi so als ob du bei jedem dieser Links ein ' onClick="..." ' stehen hättest.
Du brauchst nicht für jeden Link eine Funktion in Dein Javascript einzufügen wie Du es bisher gemacht hast.
Da braucht man noch nicht mal das Menü-Template zu ändern.

Alles was Du noch anpassen müsstest wäre das Menü-Stylesheet, damit die Untermenüs nicht wieder zusammenklappen, wenn man einen der Links dort anklickt.
D.h. du bräuchtest noch sowas in der Art (wird bei Dir so nicht funktionieren, da Du ja ein modifiziertes Menü-Template verwendest; aber ich habs gerade mal mit einem Standard-Template probiert - funzt prima):

Code: Select all

#menuwrapper ul li.menuactive ul {
	display:block;
}

#menuwrapper  ul li ul,
#menuwrapper  ul li.menuactive ul li ul {
	display:none;
}
wilderpel
Forum Members
Forum Members
Posts: 58
Joined: Sat Jan 10, 2009 2:44 pm
Location: Asperg

Re: Hilfe beim Menutemplate

Post by wilderpel »

Super. Vielen Dank. So kann ich meine Javascript-Datei schon viel übersichtlicher halten.
Aber es ist jetzt immer noch so, dass ich, wenn ich auf einen Menüpunkt zweiten Levels, der untergeordnete Punkte hat, klicke, nicht zu der Adresse komme, auf die er weist.
Ich hab das mal zum besser Verstädniss kurz "aufgemalt" (Siehe Attachment)
(auf dem Bild is ein Schreibfehler^^ es heist "zusätzliche Navigation auf der rechten Seite", nicht auf der linken, da ist ja die normale)t
Bei den normalen Menüpunten auf der Website kann man schon, sehen, wie es später funktionieren soll (da hab ich halt "gecheatet"^^), aber bei den unteren 2 Test-Menüpunkten sieht man halt, das es zu Zeit nicht funktioniert (ich hab da mal deine Tipps eingebaut).
Was ich also eigentilch noch brauche, ist die Funktion, dass die jQuery-Funktion sich nicht auf die Menuparents auf 2. Level auswirkt, sondern dass die ganz normal zu ihren Ziel leiten können.

PS: Im Template hab ich bei dem Menu-Tag übrigens angegeben number_of_levels="2" weil das 3. Level im eigentlichen Menü ja gar nicht angezigt werden soll, deshalb hat die Liste im Quellcode auch nur 2 Level.
Attachments
navigation_funktion.gif
Last edited by wilderpel on Tue Aug 04, 2009 9:15 am, edited 1 time in total.
NaN

Re: Hilfe beim Menutemplate

Post by NaN »

wilderpel wrote: PS: Im Template hab ich bei dem Menu-Tag übrigens angegeben number_of_levels="2" weil das 3. Level im eigentlichen Menü ja gar nicht angezigt werden soll, deshalb hat die Liste im Quellcode auch nur 2 Level.
Na dann ist es doch auch kein Wunder, dass es nicht funktioniert.
Lass den Parameter mal weg.
Du brauchst das komplette Menü.
Genauso wie wenn Du das CSS "Klappmenü" verwendest.
Wie soll denn sonst etwas ausklappen, wenn nichts folgt?

Daher hab ich doch geschrieben, dass Du via CSS alle Submenus generell auf display:none setzen sollst.
Dann sind sie zwar im Quelltext, werden aber nicht bzw. nur angezeigt (slide dingens), wenn man auf den übergeordneten Punkt klickt.
wilderpel
Forum Members
Forum Members
Posts: 58
Joined: Sat Jan 10, 2009 2:44 pm
Location: Asperg

Re: Hilfe beim Menutemplate

Post by wilderpel »

Naja, die, die ausklappen sollen, sind ja trotzdem da, weil die sind ja im 2. Level, nur die im 3. Level sind nicht da und die sollen ja auch nciht ausgeklappt werden.

Hab den parameter jetzt trotzdem mal rausgenommen und für die Listen auf drittem Level display:none; gesetzt. Funktioniert jetzt aber trotzdem nicht so, wie ich es mir vorstelle. :-\
NaN

Re: Hilfe beim Menutemplate

Post by NaN »

Ah... jetzt verstehe ich Dich.
Hatte gedacht, dass bei "Parent-Links" generell das Untermenü aufklappen soll.
Na dann musst Du doch an das Menü-Template ran und den Links, die Unterpunkte haben (also überall dort wo eine Klasse namens "parent" oder "menuparent" vergeben wird) noch eine Klasse mit ihrer Level hinzufügen.
Z.B. "depth_{$node->depth}".
Dann muss man im Javascript nur noch die Klasse nach "detph_2" prüfen:

Code: Select all

$(document).ready(function() {
	$("#menu_vert ul li.parent h3, #menu_vert ul li.menuparent h3, #menu_vert ul li.menuparent a.menuparent, #menu_vert ul li.parent a.parent").click(function () {
		if( this.className.indexOf( "depth_2" ) == -1 ) {
			$(this).parent().find("ul:first").slideToggle("fast");

			// hier könnte evtl. noch die Klasse des angeklickten Links geändert werden:
			// $(this).css( "class" ,this.className + " menuactive" );

			return false;
		}
	});
});
Evtl. könnte man nach der slide-function dem Link noch eine neue Klasse geben, damit das Element als "aktiviert" gekennzeichnet werden kann.

EDIT:
Hab die Selektoren im Javascript mal noch etwas geändert.
Und dann sollte man noch im CSS Submenüs des aktiven Punktes sichtbar machen:

Code: Select all

#menuwrapper ul li.currentpage ul {
	display:block;
}
Last edited by NaN on Tue Aug 04, 2009 3:33 pm, edited 1 time in total.
wilderpel
Forum Members
Forum Members
Posts: 58
Joined: Sat Jan 10, 2009 2:44 pm
Location: Asperg

Re: Hilfe beim Menutemplate

Post by wilderpel »

Ah ja, genau das habe ich gemeint.
Ich hab mir gestern aber schon auf andere Weies beholfen, nämlich in dem ich einfach die JS-Datei ein klein wenig verändert habe:

Code: Select all

$(document).ready(function() {
	$("#menuwrapper > ul > li.menuparent > a.menuparent").click(function () {
		$(this).parent().find("ul:first").slideToggle("fast");
		return false;
	});
	$("#menuwrapper > ul > li.parent > a.parent").click(function () {
		$(this).parent().find("ul:first").slideToggle("fast");
		return false;
	});
});
(so werden nur die "obersten" Menuparents erfasst)
Es geht auf beide Art, nochmal vielen Dank für deine geduldige Hilfe  ;D
Post Reply

Return to “Module und Tags”