Page 1 of 2
Aufklappmenü
Posted: Mon Dec 13, 2010 5:36 pm
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/
Re: Aufklappmenü
Posted: Mon Dec 13, 2010 8:16 pm
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.
Re: Aufklappmenü
Posted: Wed Dec 15, 2010 6:13 pm
by brandy
Vielen Dank für deine Antwort - wie lös ich das aber in CSS, dass die Unterkategorie nach unten wandert?
Re: Aufklappmenü
Posted: Thu Dec 16, 2010 9:11 am
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
Re: Aufklappmenü
Posted: Thu Dec 16, 2010 7:03 pm
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!
Re: Aufklappmenü
Posted: Fri Dec 17, 2010 4:24 pm
by brandy
Re: Aufklappmenü
Posted: Fri Dec 17, 2010 7:58 pm
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...
Re: Aufklappmenü
Posted: Sun Dec 19, 2010 9:39 am
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!
Re: Aufklappmenü
Posted: Sun Dec 19, 2010 3:49 pm
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}
Re: Aufklappmenü
Posted: Sun Dec 19, 2010 4:10 pm
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.
Re: Aufklappmenü
Posted: Sun Dec 19, 2010 6:35 pm
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!
Re: Aufklappmenü
Posted: Sun Dec 26, 2010 11:34 am
by brandy
Kann mir keiner helfen?
Vielen Dank wenn wer einen Tipp hätte!
Re: Aufklappmenü
Posted: Mon Jan 03, 2011 7:50 pm
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!
Re: Aufklappmenü
Posted: Mon Jan 10, 2011 11:56 pm
by mike-r
Bisschen spartanisch, aber geht voran ... langsam.
Du solltest Dich etwas gründlicher mit CSS befassen...
Re: Aufklappmenü
Posted: Wed Jan 12, 2011 6:10 am
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!