[Lösung] Mehrere Navigationsboxen

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
Locked
demon_firefox
New Member
New Member
Posts: 7
Joined: Wed Jul 04, 2007 2:08 pm

[Lösung] Mehrere Navigationsboxen

Post by demon_firefox »

So, nach viel Rumprobieren, Kopfschmerzen und einigen Ärgernissen ist mir eine kleine Idee gekommen, wie man wunderbar mehrere Navigationsboxen verwenden kann.

Schritt 1: Vorgabe öffnen

Als aller erstes öffnen wir mal die Navigationsvorlage minimal_menu.tpl, dessen Code wir als Vorlage für unsere neue Navigation verwenden wollen. Zur besseren Veranschaulichung der komplette Code:

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><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

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

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

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

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Schritt 2: Code säubern

Nun entfernen wir und
(Achtung! Nicht alle -Tags löschen. Der überflüssige Tag sollte sich in der 2 letzten Zeile vor {/if}  befinden)

Schritt 3: Abfragen einfügen

Damit Smarty nun weiß, ob ein neuer -Container angefangen werden soll, müssen wir die verschiedenen Möglichkeiten per if-Abfragen abfangen.

Suche:

Code: Select all

{if $node->current == true}
Füge darunter ein:

Code: Select all

{if $node->type != 'sectionheader' and $node->hierarchy == 1}
				<ul class="submenu">
{/if}
(Wenn der Menüpunkt an Position 1 steht und aktiv ist, wird überprüft ob dieser ein 'sectionheader' ist. Falls dies nicht der Fall ist, dann wird ein neuer -Container erzeugt. Zeile 3 im Code sollte angepasst werden!)

Suche:

Code: Select all

{elseif $node->type == 'sectionheader'}
Füge darunter ein:

Code: Select all

{if $node->hierarchy != 1}
				</ul>
{/if}
(Mittels Abfrage soll verhindert werden, dass beim Titel (sectionheader) der 1. Navigation kein überflüssiger -Tag am Anfang ensteht.)

Suche:

Code: Select all

{elseif $node->type == 'separator'}
						<li style="list-style-type: none;"> <hr class="separator" />
{else}
Füge darunter ein:

Code: Select all

{if $node->type != 'sectionheader' and $node->hierarchy == 1}
				<ul class="submenu">
{/if}
(Die gleiche Abfrage wie beim aktiven Menüpunkt, nur diesmal für den Standard-Menüpunkt.)

Schritt 4: Überschriften der Navigationsboxen anpassen

Suche:

Code: Select all

{elseif $node->type == 'sectionheader'}
{if $node->hierarchy != 1}
				</ul>
{/if}
<li class="sectionheader">{$node->menutext}
Passe nun

Code: Select all

<li class="sectionheader">{$node->menutext}
deinen eigenen Wünschen an.
Dazu solltet ihr zuerst einmal den -Tag entfernen, da dieser nun überflüssig ist.
Zudem ist es wichtig, dass ihr noch

Code: Select all

				<ul class="submenu">
anfügt.

Das ganze könnte dann ung. so aussehen:

Code: Select all

{elseif $node->type == 'sectionheader'}
{if $node->hierarchy != 1}
				</ul>
{/if}
					<h1  class="sectionheader">{$node->hierarchy}: {$node->menutext}</h1>
				<ul class="submenu">

Wenn ihr das ganze fertig habt, wird euch folgender Code generiert:

Code: Select all

<h1 class="sectionheader">Navigationsbox 1</h1>
	<ul class="submenu">
         	<li>Menüpunkt 1</li>
                 <li>Menüpunkt 2</li>
         </ul>

<h1 class="sectionheader">Navigationsbox 2</h1>
	<ul class="submenu">
         	<li>Menüpunkt 1</li>
                 <li>Menüpunkt 2</li>
         </ul>
usw...

Schritt 5: Abspeichern ;)

Speichert den geänderten Code am besten in eine neue Datei, z.B. mit Namen multiple_menues.tpl.
Als letzten Schritt müsst ihr nur noch in eurem Template die neue Navigation eintragen.

Tipp: Um eine neue Navigationsbox zu erstellen, müsst ihr unter Neue Seite hinzufügen bei Inhaltstyp SectionHeader auswählen.

So, das wars. Ich hoffe ihr könnt damit etwas anfangen.
Viel Spaß!

MfG demon_firefox
Last edited by demon_firefox on Wed Jul 25, 2007 6:58 pm, edited 1 time in total.
cyberman

Re: [Lösung] Mehrere Navigationsboxen

Post by cyberman »

Gute Arbeit - besten Dank für dein Posting!
Last edited by cyberman on Tue Aug 07, 2007 6:51 pm, edited 1 time in total.
nichess
Forum Members
Forum Members
Posts: 28
Joined: Wed Feb 28, 2007 7:33 am

Re: [Lösung] Mehrere Navigationsboxen

Post by nichess »

Wow genial, das hab ich die ganze Zeit ge- und versucht, vielen Dank!

Nun würde ich aber gerne zwischen Navigationsbox1 und 2 ein Bild (.jpg) einfügen, dass keine Funktion haben soll.

Code: Select all

<h1 class="sectionheader">Navigationsbox 1</h1>
	<ul class="submenu">
         	<li>Menüpunkt 1</li>
                 <li>Menüpunkt 2</li>
         </ul>
>>>> Bild.jpg <<<<<<<<<
<h1 class="sectionheader">Navigationsbox 2</h1>
	<ul class="submenu">
         	<li>Menüpunkt 1</li>
                 <li>Menüpunkt 2</li>
         </ul>

Beste Grüße
Nicolas
cyberman

Re: [Lösung] Mehrere Navigationsboxen

Post by cyberman »

Du könntest den Inhaltstyp "Separator" verwenden und dort deine Bild einfügen. Im Template "simple_navigation' ist dieser Part für Separatoren (=Trenner) zuständig:

Code: Select all

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />
Für dich müsste das Template also in etwa so aussehen

Code: Select all

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <img src="pfad/zu/deinem/bild.jpg" ... />
Last edited by cyberman on Wed Feb 06, 2008 3:52 pm, edited 1 time in total.
Jim_Bob
Forum Members
Forum Members
Posts: 33
Joined: Mon Jun 02, 2008 8:14 am

Re: [Lösung] Mehrere Navigationsboxen

Post by Jim_Bob »

Hallo,

ich habe die minimal_menu.tpl wie beschrieben geändert und im Menümanager
unter multiple_menues.tpl abgespeichert. Wenn ich im Template über
{menu template='multiple_menues.tpl'} das Menü aufrufen möchte, dann kommt immer:

string(88) "Smarty error: unable to read resource: "module_file_tpl:MenuManager;multiple_menues.tpl""

Was mache ich falsch?

Gruß
Jimbob
NaN

Re: [Lösung] Mehrere Navigationsboxen

Post by NaN »

Jim_Bob wrote: ...
ich habe die minimal_menu.tpl wie beschrieben geändert und im Menümanager
unter multiple_menues.tpl abgespeichert.
...
D.h. das Template befindet sich in der Datenbank.
Dann sollte es keine Dateinamenserweiterung wie .tpl haben.
Wenn Du im Template Dein Menü mit "multiple_menues.tpl" aufrufst, sucht der MenuManager automatisch nach einer Datei namens "multiple_menues.tpl" im Ordner modules/MenuManager/Templates. Da er diese dort nicht finden kann, kommt es zu einer Fehlermeldung.

Du müsstest also entweder Dein Template nur "multiple_menues" nennen, oder als Datei unter modules/MenuManager/templates/multiple_menues.tpl speichern.
Jim_Bob
Forum Members
Forum Members
Posts: 33
Joined: Mon Jun 02, 2008 8:14 am

Re: [Lösung] Mehrere Navigationsboxen

Post by Jim_Bob »

Yepp, das wars.
Danke für die schnelle Hilfe.
leerraum
Forum Members
Forum Members
Posts: 180
Joined: Wed Apr 22, 2009 2:54 pm

Re: [Lösung] Mehrere Navigationsboxen

Post by leerraum »

ok, ich hab mir das ganze konstrukt da oben mal zu gemüte geführt, aber irgendwie .... es kommt bei mir nur html technischer schmonz raus. anscheinend verstehe ich nicht wirklich wo ich was einzufügen habe:

mein template sieht jetzt so aus:

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}

{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}

{* Special Alias 

{if $node->index == 0}
<li id="element0"><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->index == 1}
<li id="element1"><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->index == 2}
<li id="element2"><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->index == 3}
<li id="element3"><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->index == 4}
<li id="element4"><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
*}


{if $node->current == true}
{if $node->type != 'sectionheader' and $node->hierarchy == 1}
				<ul class="submenu">
{/if}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
{if $node->hierarchy != 1}
				</ul>
{/if}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
{if $node->type != 'sectionheader' and $node->hierarchy == 1}
				<ul class="submenu">
{/if}
<hr class="separator" />
<ul class="submenu">
{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
ich möchte eigentlich nur den submenupunkten einen anderen stil als den hauptmenupunkten zuweisen.
was mache ich da hier falsch?

danke
leerraum
leerraum
Forum Members
Forum Members
Posts: 180
Joined: Wed Apr 22, 2009 2:54 pm

Re: [Lösung] Mehrere Navigationsboxen

Post by leerraum »

ich grübel immernoch.... hmmm
NaN

Re: [Lösung] Mehrere Navigationsboxen

Post by NaN »

leerraum wrote: ich möchte eigentlich nur den submenupunkten einen anderen stil als den hauptmenupunkten zuweisen.
was mache ich da hier falsch?
Dann ist das hier der falsche Ansatz für Dich.
Den Stil änderst Du im Stylesheet.
Last edited by NaN on Sat Aug 29, 2009 2:13 pm, edited 1 time in total.
Locked

Return to “Layout und Design”