• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 9 posts ] 
Author Message
 Post subject: Hilfe beim Menutemplate
PostPosted: Sun Aug 02, 2009 12:35 pm 
Offline
Forum Members
Forum Members

Joined: Sat Jan 10, 2009 2:44 pm
Posts: 58
Location: Asperg
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:
\$1:
<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)
\$1:
{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 ^^


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Hilfe beim Menutemplate
PostPosted: Sun Aug 02, 2009 1:27 pm 
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.


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Hilfe beim Menutemplate
PostPosted: Sun Aug 02, 2009 7:05 pm 
Offline
Forum Members
Forum Members

Joined: Sat Jan 10, 2009 2:44 pm
Posts: 58
Location: Asperg
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Hilfe beim Menutemplate
PostPosted: Sun Aug 02, 2009 10:53 pm 
Bin auch nicht so fit in jQuery aber wenn ich Dich richtig verstanden habe, dann brauchst Du nur das hier:

\$1:
$(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):

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

#menuwrapper  ul li ul,
#menuwrapper  ul li.menuactive ul li ul {
   display:none;
}


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Hilfe beim Menutemplate
PostPosted: Tue Aug 04, 2009 9:11 am 
Offline
Forum Members
Forum Members

Joined: Sat Jan 10, 2009 2:44 pm
Posts: 58
Location: Asperg
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
navigation_funktion.gif [ 26.94 KiB | Viewed 3277 times ]


Last edited by wilderpel on Tue Aug 04, 2009 9:15 am, edited 1 time in total.
Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Hilfe beim Menutemplate
PostPosted: Tue Aug 04, 2009 9:17 am 
wilderpel \wilderpel:
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.


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Hilfe beim Menutemplate
PostPosted: Tue Aug 04, 2009 9:58 am 
Offline
Forum Members
Forum Members

Joined: Sat Jan 10, 2009 2:44 pm
Posts: 58
Location: Asperg
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. :-\


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Hilfe beim Menutemplate
PostPosted: Tue Aug 04, 2009 1:42 pm 
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:

\$1:
$(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:

\$1:
#menuwrapper ul li.currentpage ul {
   display:block;
}


Last edited by NaN on Tue Aug 04, 2009 3:33 pm, edited 1 time in total.

Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Hilfe beim Menutemplate
PostPosted: Wed Aug 05, 2009 11:00 am 
Offline
Forum Members
Forum Members

Joined: Sat Jan 10, 2009 2:44 pm
Posts: 58
Location: Asperg
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:
\$1:
$(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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 9 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting