[Gelöst] Navigation mit zusätzlicher Klasse

[mw1972]

Hallo!

Ich bräuchte für eine horizontale Navi eine zusätzliche Klasse für den jeweils letzten Menüpunkt.

Dieser bekommt dann per CSS eine extra Formatierung.

Ich kenne mich mit der Syntax nicht aus, glaube aber, dass das relativ einfach umzusetzen ist.

Hat jemand eine Idee?

[antibart]

Was meint Du mit "jeweils letzten Menüpunkt"?

Der letzte, der angeklickt wurde?

Der Hinterste im Menü?

Eine klasse in der Art a.last:visited {styles} kannst Du natürlich sehr leicht erstellen.

Dann fehlt aber noch die Anweisung, dass der Browser sich die letzte besuchte Seite auch "merkt" ... und das mit reinem css/html meines Wissens nicht realisierbar und bräuchte wohl etwas Script.

[mw1972]

nein, ich meine nicht den zuletzt besuchten, sondern den numerisch letzten in der liste.

hintergrund: das menü-css weist dem letzten ganz rechts stehenden element ein float: right zu. alle anderen bekommen float: left.

zu sehen hier: http://www.highresolution.info/. Das bei Kontakt ist rechts gefloatet. Meine Navi soll so ähnlich werden.

Das setzt aber voraus, dass der letzte punkt eine extra klasse bekommt.

[NaN]

Ich hätte jetzt spontan gesagt "Menütemplate so modifizieren, dass ... und dazu die Variable $node->index verwenden" aber erstens scheint sich am Menümanager etwas geändert zu haben (der Index wird jetzt für alle Menüpunkte durchweg von 0 bis Ende gezählt; früher nur innerhalb der jeweiligen Menüebene) und zweitens ist das doch ein bissel mehr tricky als ich dachte.

Du könntest als einfachste (aber sicher nicht flexibelste) Lösung das Extra Feld im Tab Optionen beim Bearbeiten einer Seite dazu verwenden.
Dort könntest Du einfach den Klassennamen z.B. "last-menu-item" eintragen und dann im Menütemplate dieses Feld nach einem Wert prüfen und als CSS Klasse einsetzen.

Allerdings müsstest es für jede letzte Seite in der jeweiligen Ebene von Hand dort eintragen.
Und wenn sich die Seitenreihenfolge ändert, musst Du es immer wieder neu anpassen.

Ich wüsste jetzt auf Anhieb keine einfache Möglichkeit die Anzahl der Menüelemente in einer Ebene zu ermitteln ohne den Quellcode des Menümanagers zu modifizieren.

Aber vielleicht gehts ja auch mit einem UDT und exzessivem Smarty-Einsatz und CGSimpleSmarty... ma schaun, hab da jetzt konkret noch keine Lösung, dürfte aber (hoffentlich) nicht allzu kompliziert werden.

[antibart]

zu sehen hier: http://www.highresolution.info/. Das bei Kontakt ist rechts gefloatet. Meine Navi soll so ähnlich werden.

Entweder ich hab was auf den Augen, oder ich verstehe dich nicht: ich sehe nichts weiter als ein ganz gewöhnliches vertikales Menü ...

Ich kann zwar im Code sehen, dass der letzte Punkt die class="last" hat - aber ich sehe keinen Effekt.

[mw1972]

wenn du den firebug benutzt kannst du ablesen, dass die klasse .last ein float: right zugewiesen hat. der effekt ist, dass das layout "robuster" wird (so die angabe des autors dirk jesse). jedenfalls ist die navi schön und ich möchte die technik gerne anwenden.
hier der auszug aus dem listing.

Code: Select all

#nav {
border-top:1px solid #DDDDDD;
font-family:'Trebuchet MS',Verdana,Arial,Helvetica,sans-serif;
margin-top:0.5em;
}
#nav_main {
background:#FFFFFF none repeat scroll 0 0;
display:inline;
float:left;
font-size:85.714%;
margin-top:0.5em;
width:100%;
}
#nav_main ul {
display:inline;
float:left;
margin:0;
width:100%;
}
#nav_main ul li {
display:inline;
float:left;
line-height:1em;
list-style-type:none;
margin:0;
padding:0;
width:16.667%;
}



#nav_main ul li.last {
display:inline;
float:right;
margin-left:-5px;
}




#nav_main ul li a span {
color:#888888;
display:block;
font-family:Verdana,Helvetica,Arial,sans-serif;
font-size:83.333%;
font-weight:normal;
padding-top:0.5em;
}
#nav_main ul li a, #nav_main ul li strong {
border-left:1px solid #EEEEEE !important;
border-right:6px solid #FFFFFF !important;
color:#880000;
display:block;
font-weight:bold;
height:4em;
margin:0;
padding:6px 6px 6px 12px;
text-decoration:none;
text-transform:uppercase;
}
#nav_main ul li a:focus, #nav_main ul li a:hover, #nav_main ul li a:active {
background:#222222 none repeat scroll 0 0;
color:#FFFFFF;
}
#nav_main ul li a:focus span, #nav_main ul li a:hover span, #nav_main ul li a:active span {
background:#222222 none repeat scroll 0 0;
border-color:#000000;
color:#CCCCCC;
}
#nav_main ul li#current strong, #nav_main ul li#current a {
background:#660000 none repeat scroll 0 0;
color:#FFFFFF;
}
#nav_main ul li#current a:focus, #nav_main ul li#current a:hover, #nav_main ul li#current a:active {
background:#991111 none repeat scroll 0 0;
color:#FFFFFF;
}
#nav_main ul li#current a:focus span, #nav_main ul li#current a:hover span, #nav_main ul li#current a:active span {
background:transparent none repeat scroll 0 0;
}
#nav_main ul li#current a span {
color:#CCCCCC;
}

[cyberman]

Schau mal in die Registerkarte Optionen und die Hilfe des MenuManagers - kennzeichne die letzte Seite mit irgend einem Attribut und les dies dann im MenuManager-Template aus.

Also z.Bsp. so

Code: Select all

{elseif $node->titleattribute == 'last'}
<li class="last"><a href="{$node->url}"{if $node->target != ''} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>

Andere Möglichkeiten der Optionen-Seite sind evtl. besser, wenn du Wert auf die Barrierefreiheit legst.

[mw1972]

das werde ich gleich morgen mal probieren. vielen dank.

was meinst du mit anderen möglichkeiten auf der optionen-seite?

[cyberman]

Naja, die Extra-Felder 1-3 sind für solche Sachen ja gerade zu prädestiniert ...

[antibart]

wenn du den firebug benutzt kannst du ablesen, dass die klasse .last ein float: right zugewiesen hat.

Ja - gelesen habe ich das wohl ... nur sehen tu ich nichts...

Warum das Layout dadurch robuster wird, bleibt ein Geheimnis für mich...

Der einzige mögliche Vorteil, den ich mir erklären könnte,  könnte evtl. beim eingebauten Resize der Seite liegen.

... aber was solls ....

[mw1972]

Ich habe den Code von cyberman

Code: Select all

{elseif $node->titleattribute == 'last'}
<li class="last"><a href="{$node->url}"{if $node->target != ''} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>

mal testweise in das menütemplate cssmenu eingefügt.

leider ohne ergebnis.

daraufhin habe ich mal versucht die logik dieses templates zu verstehen und habe den codeschnipsel

Code: Select all

{elseif $node->titleattribute == 'last'}
<li class="menuparent last"><a class="menuparent"

relativ weit oben im code eingefügt.

da auch dies nicht den gewünscht effekt hatte, frage ich hier nochmal nach. denn ich habe die logik des templates nicht verstanden.

ich weiß außerdem auch garnicht an welcher stelle der code hineinkopiert werden soll. gibt es dazu irgendeine verständliche anleitung?

hier mal der code aus dem modifizierten cssmenu.tpl

Code: Select all

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{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" 
{elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />




{elseif $node->titleattribute == 'last'}
<li class="menuparent last"><a class="menuparent"






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

[NaN]

Da ich schon seit längerem geplant habe eine Art Dokumentation für die Menütemplates zu erstellen, damit jeder sein Menü anpassen kann wie er es haben möchte, hier mein erster Versuch.
Auf genaue Erklärungen des Smarty-Syntax wird hier erstmal verzichtet.
Der interessierte Leser sei hiermit an das Smarty-Handbuch verwiesen (http://www.smarty.net/manual/de/)
Ich versuchs mal mit Kommentaren innerhalb dem von Dir geposteten Template.
Diese hier beschriebene Logik lässt sich übrigens in jedem beliebigen Template anwenden.
Ich würde es übrigens nicht mit dem Titleattribut sondern über eines der Extra-Felder lösen, da das Titleattribut sonst als Tooltip zum Link ausgegeben wird.
Und bei Kontakt die Info "Last" zu lesen ist nicht sonderlich hilfreich

Code: Select all

{* In einem Template gibt es verschiedene Variablen mit dessen Hilfe sich Inhalte dynamisch gestalten lassen.
    Um sich alle verfügbaren Variablen in einem Template anzeigen zu lassen, 
    kann man sich diese mit dem Tag {get_template_vars} ausgeben lassen.
    Einfach den Tag irgendwo im Template platzieren (idealerweise am Anfang oder am Ende), 
    speichern und sich das Ergebnis im Frontend anschauen. *}


{if $count > 0}				{* $count ist eine Templatevariable.				*}
					{* Sie beinhaltet die Anzahl der anzuzeigenden Menüeinträge.	*}
					{* Wenn die Anzahl der gefundenen Einträge größer ist als 0 ...	*}
<div id="menuwrapper">			{* gib ein <div> mit der id "menuwrapper" aus ...		*}
	<ul id="primary-nav">		{* und eine Liste mit der id "primary-nav".			*}
					{* Das ist die Liste mit den Hauptmenüpunkten.			*}

{foreach from=$nodelist item=node}	{* $nodelist ist eine Templatevariable. Genaugenommen vom Typ "Objekt".			*}
					{* Das ist sowas ähnliches wie ein Array. Es beinhaltet mehrere weitere Variablen.	*}
					{* Diese können ebenfalls Objekte oder Arrays sein.					*}
					{* In $nodelist sind alle anzuzeigenden Menüeinträge inklusive aller Eigenschaften	*}
					{* wie Menütext, Extrafelder, URL, Inhaltstyp, Hierarchie usw. enthalten.		*}
					{* Um zu sehen was genau alles in $nodelist enthalten ist,				*}
					{* kann man sich mit {$nodelist|print_r} dessen kompletten Inahlt anzeigen lassen.	*}
					{* Im Folgenden wird dieses Objekt in einer foreach-Schleife durchlaufen. 		*}
					{* ( foreach = "for each" = "für jedes (Element)" )					*}
					{* Es soll für jedes gefundene Element etwas geprüft und ausgegeben werden.		*}
					{* "from=$nodelist" bedeutet, welches Objekt oder Array durchlaufen werden soll.	*}
					{* "item=node" ist eine Variable, auf die das gefundene Element innerhalb der Schleife	*}
					{* gelegt wird und über die dann auf dessen Inhalt zugegriffen werden kann.		*}
					{* (Den Namen dieser Variable kann man im Template selbst vergeben)			*}

{if $node->depth > $node->prevdepth}	{* "depth" gibt die "Ebene" an in der sich der Menüpunkt befindet.	*}
					{* Wenn die Ebene des aktuellen Menüpunktes ($node->depth) größer ist	*}
					{* als die des Vorhergehenden ($node->prevdepth) ...			*}

	{repeat string="<ul>" times=$node->depth-$node->prevdepth} 	{* dann soll ein Untermenü in Form einer weiteren	*}
								{* Liste erstellt werden.				*}
								{* Und zwar soll das ganze so oft wiederholt werden,	*}
								{* wieviele Ebenen der aktuelle Menüpunkt größer ist 	*}
								{* als die des Vorhergehenden. 				*}
								{* (Es wird also die Differenz aus aktueller und 	*}
								{* vorhergehender Ebene ermittelt) 			*}
								{* Eigentlich ist es unwahrscheinlich, dass die 	*}
								{* nachfolgende Ebene mehr als um eins größer ist 	*}
								{* als die Vorhergehende, aber sicher ist sicher. 	*}

{elseif $node->depth < $node->prevdepth}					{* Und nun das ganze natürlich umgekehrt.	*}
	{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}	{* Die Liste muss genauso oft auch wieder	*}
										{* geschlossen werden.				*}
	</li>									{* Dabei werden auch Listenpunkte (</li>)	*}
										{* wieder geschlossen.				*}
										{* Diese werden zuvor an einer anderen Stelle	*}
										{* weiter unten geöffnet.			*}

{elseif $node->index > 0}		{* Was genau das hier soll weiß ich selber noch nicht genau... *}
	</li>
{/if}


{* Jetzt wirds interessant, jetzt kommen die eigentlichen Menüeinträge.
    Zunächst werden bestimmte Einzelfälle geprüft, um dem Menüpunkt die ein oder andere Klasse geben zu können.
    Als erstes wird geprüft, ob der Menüpunkt einem aktiven Menüpunkt übergeordnet ist ($node->parent==true)
    oder, ob er selbt angewähl ist und noch weitere Untermenüpunkte hat ($node->current==true and $node->haschildren==true). *}

{if $node->parent == true or ($node->current == true and $node->haschildren == true)}

	<li class="menuactive menuparent 	{* Wenn ja, dann bekommt er die Klassen "menuparent" und "menuactive".	*}
	{if $node->extra1=='last'} last {/if}	{* An dieser Stelle unterbrechen wir den ursprünglichen Code		*}
						{* und fügen unsere Klasse "last" ein.					*}
	"><a class="menuactive menuparent"	{* Hier geht der ursprüngliche Code weiter.				*}

{elseif $node->current == true}			{* Wenn der Menüpunkt einfach nur aktiv ist,			*}
	<li class="menuactive			{* dann bekommt er nur die entsprechende Klasse "menuactive"	*}
	{if $node->extra1=='last'} last {/if}	{* Auch hier wieder unser Check nach dem Extra-Feld		*}
	"><a class="menuactive" 

{elseif $node->haschildren == true}		{* Wenn der Menüpunkt einfach nur weitere Untermenüpunkte enthält,	*}
	<li class="menuparent			{* dann bekommt er nur die entsprechende Klasse "menuparent"		*}
	{if $node->extra1=='last'} last {/if}	{* Und auch hier wieder unser Check nach dem Extra-Feld			*}
	"><a class="menuparent" 

{elseif $node->type == 'sectionheader'}		{* Jetzt wird nach Inhaltstypen "sectionheader" und "separator" geprüft	*}

	<li class="sectionheader"><span> {$node->menutext} </span>	{* Bei "sectionheader" soll nur der Menutext		*}
								{* ausgegeben werden.					*}
								{* Korrekterweise müsste man auch hier wieder		*}
								{* nach dem Extra-Feld prüfen, jedoch ist es		*}
								{* unwarscheinlich, dass eine Abschnittsüberschrift	*}
								{* am Ende steht					*}
{elseif $node->type == 'separator'}
	<li style="list-style-type: none;"> <hr class="separator" />	{* Bei "separator" soll eine Linie ausgegeben werden.	*}


{* Für alle anderen Fälle soll einfach nur ein Listenpunkt mit einem Link ausgegeben werden. *}
{else}
	<li
	{if $node->extra1=='last'} class="last" {/if}		{* Auch hier wieder unser Check nach dem Extra-Feld *}
	><a 
{/if}

{if $node->type != 'sectionheader' and $node->type != 'separator'}	{* Allerdings müssen wir hier die Inhaltstypen	*}
								{* "Sectionheader" und "Seperator" ausgrenzen	*}

{* Es folgen letztendlich die Attribute für den Link *}

href="{$node->url}" 						{* href *}
{if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}	{* accesskey *}
{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}		{* tabindex *}
{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}	{* title *}
{if $node->target ne ""} target="{$node->target}"{/if}		{* target *}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>		{* menütext *}

{* Bei Sectionheadern wird in der Regel nur der Menütext ausgegeben *}

{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}

{/foreach}							{* Ende der foreach-Schleife *}
{repeat string="</li></ul>" times=$node->depth-1}		{* Schließen des Listenpunktes/der Liste... *}
		</li>
	</ul>
<div class="clearb"></div>
</div>								{* Schließen des Menü-Divs... *}
{/if}								{* Ende *}

So!
Ich hoffe damit kann jemand etwas anfangen.

[mw1972]

SUPER! Danke.

das ist wirklich sehr elegant und auch für mich gut nachzuvollziehen. wird sofort ausprobiert!

dummerweise habe ich habe jetzt unabhängig von deiner lösung durch studieren der smarty-anleitung und durch stetes nachdenken eine lösung gefunden. ich weiß zwar nicht, ob die astrein ist, aber sie funktioniert auch.

verwendet habe ich das extra1-feld, in das ich die Klasse last eingetragen habe. hier also meine individualisierte lösung. ausgangspunkt ist dabei das template minimal.tpl, das ich wie folgt modifiziert habe:

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

{elseif $node->current == true and $node->extra1 == 'last'}
<li class="last"><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->extra1 == 'last'}
<li class="last"><a href="{$node->url}" class="activeparent" {if $node->target != ''} 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}

[cyberman]

gibt es dazu irgendeine verständliche anleitung?

Hatte da vor längerem mal etwas geschrieben

http://forum.cmsmadesimple.org/index.ph ... l#msg62062

Hmm, das letzte Element eines Arrays sollte sich doch auch in dieser Art abfragen lassen

Code: Select all

{if $smarty.foreach.node.last}