Aufklappmenü

brandy · **Joined:** Mon Apr 21, 2008 5:32 pm **Posts:** 146

Hallo!

Arbeite momentan mit folgendem Menütemplate:

Code:

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul class="clearfix">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><div class="menulink_top"><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> <img src="uploads/images/menu/{$node->alias}.jpg" alt="{$node->menutext}" class="menulink_top_img"/></a></div>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <div class="menulink_top"><a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> <img src="uploads/images/menu/{$node->alias}.jpg" alt="{$node->menutext}" class="menulink_top_img"/> </a></div>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><div class="menulink_top"><img src="uploads/images/menu/{$node->alias}.jpg" alt="{$node->menutext}" class="menulink_top_img"/></div>

{elseif $node->type == 'separator'}
<li style="list-style-type: none;"><hr class="separator_left"/>

{else}
<li><div class="menulink_top"><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> <img src="uploads/images/menu/{$node->alias}.jpg" alt="{$node->menutext}" class="menulink_top_img"/></a></div>

{/if}
{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Wie baue ich dieses so um, dass es die Unterkategorien nach unten ausklappt - so wie auf dieser Seite: http://www.untertrifaller.com/

nockenfell · **Posted:** Mon Dec 13, 2010 8:16 pm

Ohne dir die Lösung zu präsentieren nur ein paar Lösungsansätze:

Du kannst ein normales simple_navigation.tpl Template nehmen, dort ev ein paar Stylesheet-Class Zuweisungen anpassen und danach das Stylesheet entsprechend anpassen.

Dazu kannst du problemlos auch das Stylesheet der von dir genannten Seite nehmen und entsprechend einbauen.

brandy · **Joined:** Mon Apr 21, 2008 5:32 pm **Posts:** 146

Vielen Dank für deine Antwort - wie lös ich das aber in CSS, dass die Unterkategorie nach unten wandert?

pawi · **Joined:** Wed Jun 23, 2010 8:20 am **Posts:** 15

Du findest ganz viele Menüvorlagen hier
http://www.cssmenus.co.uk/dropdown.html

Was meinst du, mit automatisch nach unten wandert? Die übergeordneten Seiten legst du im CMS-Backend in der Seite selbst an. Wie die Hierarchien deines Menüs dann aussehen sollen, legst du mit CSS fest.

Gruß, pawi

brandy · **Joined:** Mon Apr 21, 2008 5:32 pm **Posts:** 146

Ich hab mir das mit dem Menüdesign über CSS angeschaut. Nur komm ich mit den ganzen Klassen nicht zusammen.
Hier erstmal der Link zur Seite: http://www.arch-lechner.at
Das Menü setzt sich ja aus Aufzählungen zusammen. Theoretisch müsst ich ja nur die aktuell aktive Ebene bearbeiten, doch leider ändert sich nichts.
Eine weitere Frage wäre, wieso momentan beim Klick auf einen Menüpunkt, dieser nach unten verschoben wird obwohl ich nichts definiert habe.
Vielen Dank für eure Hilfe!

brandy · **Joined:** Mon Apr 21, 2008 5:32 pm **Posts:** 146

Linkupdate:

http://www.arch-lechner.at/index.php

Vielen Dank!

mike-r · **Joined:** Mon Nov 05, 2007 11:35 am **Posts:** 540

brandy wrote:

Eine weitere Frage wäre, wieso momentan beim Klick auf einen Menüpunkt, dieser nach unten verschoben wird obwohl ich nichts definiert habe.

WEIL Du nichts definiert hast, rutscht es nach unten. Hier werden die Standardstyles vom Browser geholt, für h3 wäre das bspw. etwa eine Buchstabenhöhe Abstand nach oben und unten.

Mit Firebug findest Du solche Sachen sehr schnell heraus...

brandy · **Joined:** Mon Apr 21, 2008 5:32 pm **Posts:** 146

Vielen Dank - ist ja ein cooles Teil - ich hab bis jetzt mit Webdeveloper gearbeitet, aber das ist ja noch eine bessere Ergänzung!

Dankesehr!

brandy · **Joined:** Mon Apr 21, 2008 5:32 pm **Posts:** 146

Eine Frage hab ich jetzt noch - Wo kommt das verflixte

her? Ich hab es nirgends in meinem Menütemplate:

Code:
{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}

{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</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="menuactive menuparent"><a class="menuactive menuparent" href="{$node->url}">{$node->menutext}</a>

{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}">{$node->menutext}</a>

{elseif $node->current == true}
<li class="currentpage">{$node->menutext}

{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->url}">{$node->menutext}</a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

mike-r · **Joined:** Mon Nov 05, 2007 11:35 am **Posts:** 540

Da das in Deinem Template nicht steht, nehme ich an, dass das das falsche ist, was Du bearbeiten möchtest.
Allerdings musst Du dort garnix tun, das h3 ist doch völlig korrekt da?
Du musst es via CSS nur umstylen.

brandy · **Joined:** Mon Apr 21, 2008 5:32 pm **Posts:** 146

Hallo!

Ich habs jetzt schon mal soweit, dass das Menü auf zwei verschiedenen Positionen angezeigt wird - wie bekomm ich das aber hin, dass das Parent-Menü an der Ursprungsposition bleibt?

Vielen Dank!

brandy · **Joined:** Mon Apr 21, 2008 5:32 pm **Posts:** 146

Kann mir keiner helfen?

Vielen Dank wenn wer einen Tipp hätte!

brandy · **Joined:** Mon Apr 21, 2008 5:32 pm **Posts:** 146

So jetzt hab ichs mal soweit geschafft - was haltet ihr davon? Verbesserungsvorschläge?

http://www.arch-lechner.at/index.php

Vielen Dank für eure Meinung!

mike-r · **Joined:** Mon Nov 05, 2007 11:35 am **Posts:** 540

Bisschen spartanisch, aber geht voran ... langsam.

Du solltest Dich etwas gründlicher mit CSS befassen...

brandy · **Joined:** Mon Apr 21, 2008 5:32 pm **Posts:** 146

Danke für die Antwort!
Ich komm mit den ganzen Klassen nicht klar - den Aufbau von Menüs versteh ich ja.
Es sind in meinem Fall ja nur zwei Aufzählungen. Die Tochteraufzählung steht eigentlich irgendwo und bezieht ihre Position erst wenn man auf dem entsprechenden Punkt im Parent klickt - gut. Nur das Problem dabei ist, das mit den bestehenden Klassen zu verwirklichen. Ich habs jetzt, wie du sagst, ganz einfach hinbekommen. Hat vielleicht jemand ein schönes, nicht so groß aufgezogenes Menü, wie oben gepostet, damit ich mir so etwas mal durchschauen kann?

Ein Problem hab ich bei meiner Lösung momentan noch?
Wie zB krieg ich den margin-bottom weg, wenn das Kind-Menü aufklappt?

Vielen Dank für eure Hilfe!

Aufklappmenü

Who is online