Aufklappmenü

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
brandy
Forum Members
Forum Members
Posts: 146
Joined: Mon Apr 21, 2008 5:32 pm

Aufklappmenü

Post by brandy »

Hallo!

Arbeite momentan mit folgendem Menütemplate:

Code: Select all

{* 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
Power Poster
Power Poster
Posts: 751
Joined: Fri Sep 12, 2008 2:34 pm
Location: Schweiz / Switzerland

Re: Aufklappmenü

Post by nockenfell »

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.
[this message is written with 100% recycled bits]
brandy
Forum Members
Forum Members
Posts: 146
Joined: Mon Apr 21, 2008 5:32 pm

Re: Aufklappmenü

Post by brandy »

Vielen Dank für deine Antwort - wie lös ich das aber in CSS, dass die Unterkategorie nach unten wandert?
User avatar
pawi
Forum Members
Forum Members
Posts: 15
Joined: Wed Jun 23, 2010 8:20 am

Re: Aufklappmenü

Post by pawi »

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
Forum Members
Forum Members
Posts: 146
Joined: Mon Apr 21, 2008 5:32 pm

Re: Aufklappmenü

Post by brandy »

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
Forum Members
Forum Members
Posts: 146
Joined: Mon Apr 21, 2008 5:32 pm

Re: Aufklappmenü

Post by brandy »

Linkupdate:

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

Vielen Dank!
mike-r

Re: Aufklappmenü

Post by mike-r »

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
Forum Members
Forum Members
Posts: 146
Joined: Mon Apr 21, 2008 5:32 pm

Re: Aufklappmenü

Post by brandy »

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
Forum Members
Forum Members
Posts: 146
Joined: Mon Apr 21, 2008 5:32 pm

Re: Aufklappmenü

Post by brandy »

Eine Frage hab ich jetzt noch - Wo kommt das verflixte her? Ich hab es nirgends in meinem Menütemplate:

Code: Select all

{* 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}"><span>{$node->menutext}</span></a>

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

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

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

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

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

{/if}

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

mike-r

Re: Aufklappmenü

Post by mike-r »

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
Forum Members
Forum Members
Posts: 146
Joined: Mon Apr 21, 2008 5:32 pm

Re: Aufklappmenü

Post by brandy »

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
Forum Members
Forum Members
Posts: 146
Joined: Mon Apr 21, 2008 5:32 pm

Re: Aufklappmenü

Post by brandy »

Kann mir keiner helfen?

Vielen Dank wenn wer einen Tipp hätte!
brandy
Forum Members
Forum Members
Posts: 146
Joined: Mon Apr 21, 2008 5:32 pm

Re: Aufklappmenü

Post by brandy »

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

Re: Aufklappmenü

Post by mike-r »

Bisschen spartanisch, aber geht voran ... langsam.

Du solltest Dich etwas gründlicher mit CSS befassen...
brandy
Forum Members
Forum Members
Posts: 146
Joined: Mon Apr 21, 2008 5:32 pm

Re: Aufklappmenü

Post by brandy »

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!
Post Reply

Return to “Layout und Design”