Markierung des aktiven Menüpunktes

[search1]

Hallo zusammen!
Ich verwende begeistert S9y als CMS. Jetzt wäre es schön, jeweils die aktiven Menüpunkte im Hauptmenü, aber auch im Seitenmenü zu markieren (etwa mit einer anderen Farbe zu hinterlegen). Wie stelle ich so etwas am besten an?
Schon mal Danke!

[yellowled]

Jetzt wäre es schön, jeweils die aktiven Menüpunkte im Hauptmenü, aber auch im Seitenmenü zu markieren (etwa mit einer anderen Farbe zu hinterlegen). Wie stelle ich so etwas am besten an?

Mit CSS.

Menüpunkte sind (normalerweise) Links, Links können über die CSS-Pseudoklassen :link, :active, :focus und :hover individuelle CSS-Anweisungen zugewiesen bekommen. Aber Vorsicht: Die Frage ist, was Du mit „aktive Menüpunkte“ genau meinst und welcher/n Pseudoklasse(e) dem evtl. zuzuordnen sind.

Zudem ist es in s9y ggf. möglich, die aktuell aufgerufene Seite, normalerweise über in der config.inc.php zugewiesene Variablen (meist: currpage, evtl. currpage2), zu erkennen und bei Übereinstimmung mit $serendipityBaseURL Menüpunkten spezielle CSS-Klassen (nicht Pseudoklassen!) oder eine id zuzuweisen.

Da bei Euch die Menüs meiner Erinnerung nach komplett hart kodiert sind, sollte die s9y-„Version“ auch im Submenü in der Seitenleiste machbar sein.

So, jetzt aber meine dumme Frage: Das ist doch bei Euch bereits so? (Wenngleich die Hervorhebung des aktiven Menüpunktes über style="..." ziemlich unschön ist.)

YL

[search1]

Hallo yellowled,

danke für die Antwort!
Die CSS-Pseudoklassen sind meines Wissens nicht geeignet, den momentan angezeigten Menüpunkt zu markieren?
Die Idee mit dem Vergleich mit currpage klingt vielversprechend, nur leider gelingt es mir nicht
Hab in eingenes_Template/style.css folgendes Format definiert:

Code: Select all

.hinterlegt {
    color:#184E8B;
    background-color:#ffffff;
}

und in eigenes_Template/index.php
folgenden Link beim Hauptmenü gestaltet:

Code: Select all

           <li><a {if $currpage == $serendipityBaseURL}class="hinterlegt" {/if}href="{$serendipityBaseURL}">Start</a></li>

Dies führt aber zu keinem geänderten Ergebnis: Der Menüpunkt bleibt, wenn geöffnet, in der alten Hintergrundfarbe. Was mache ich falsch?

So, jetzt aber meine dumme Frage: Das ist doch bei Euch bereits so? (Wenngleich die Hervorhebung des aktiven Menüpunktes über style="..." ziemlich unschön ist.)

Bei uns ist nur das obere Hauptmenü bereits hinterlegt, aber so umständlich, dass dies kein Weg für das Seitenmenü darstellt:
die eigenes_Template/index.php verweist auf eine mainnav.tpl, in der abgefragt wird:

Code: Select all

{if $view == 'start'}
{include file="mainnav_start.tpl"}

in dieser mainnav_start.tpl wird dann der style nur für die Startseite definiert. So benötigt jede Seite eine eigene php-Datei. Außerdem muss neben {if $view == 'start'} auch die {elseif $view == 'entry'}, {elseif $view == 'plugin'}, {elseif $faq_plugin.this_faq.category}, {elseif $faq_plugin.subcategories} und {elseif $view == 'categories'} für alle Seiten abgefragt werden, was die Sache bei einer Änderung ziemlich verkompliziert.
Da würde mir doch die eine Lösung mit currpage deutlich besser gefallen...

[yellowled]

Die CSS-Pseudoklassen sind meines Wissens nicht geeignet, den momentan angezeigten Menüpunkt zu markieren?

Nein. Mit diesen Pseudoklassen kann man noch nicht besuchte (:link), bereits besuchte (:visited), mit der Tastatur fokussierte (:focus), mit der Maus überfahrene (:hover) sowie gerade angeklickte (:active) Links (genauer: Elemente, denn in modernen Browsern kann man diese Pseudoklassen durchauch auch auf andere HTML-Elemente anwenden) gestalten.

Ich weiss, :active hört sich an, als sei es das, was Du suchst -- ist es aber nicht.

und in eigenes_Template/index.php
folgenden Link beim Hauptmenü gestaltet:

Code: Select all

           <li><a {if $currpage == $serendipityBaseURL}class="hinterlegt" {/if}href="{$serendipityBaseURL}">Start</a></li>

Dies führt aber zu keinem geänderten Ergebnis: Der Menüpunkt bleibt, wenn geöffnet, in der alten Hintergrundfarbe. Was mache ich falsch?

Zunächst mal funktioniert das so ohnehin nur für genau eine Seite.

Darüber hinaus haben wir hier das Problem, dass in diesem Fall die gesamte Navigation hart kodiert ist. Die $currpage-Technik funktioniert z.B. im Bulletproof-Template so, dass die URLs, auf welche der jeweilige Link verweist, in einer Variablen abgelegt wird, welche dann mit $currpage und $currpage2 verglichen werden kann.

In Eurem Fall mussten diese URLs jedoch aufgrund der gewünschten Menüstruktur hart einkodiert werden, d.h. es gibt keine Variable, mit der man $currpage(2) vergleichen könnte -- außer eben den paar wenigen, die s9y bereitstellt, die aber nur die wenigsten Seiten abdecken.

Davon abgesehen müsste man den CSS-Selektor auch anders gestalten, aber die Frage stellt sich so noch gar nicht. Es müsste #navi a.hinterlegt sein, damit die Kaskade korrekt funktioniert, aber wie gesagt: Zunächst müsste man einen Weg finden, diese Klasse überhaupt korrekt zuzuweisen.

Ganz generell muss ich mir mal genauer ansehen, wie es mittlerweile funktioniert, Du hast ja doch zwischenzeitlich einiges umgebaut.

die eigenes_Template/index.php verweist auf eine mainnav.tpl, in der abgefragt wird:

Code: Select all

{if $view == 'start'}
{include file="mainnav_start.tpl"}

in dieser mainnav_start.tpl wird dann der style nur für die Startseite definiert. So benötigt jede Seite eine eigene php-Datei. Außerdem muss neben {if $view == 'start'} auch die {elseif $view == 'entry'}, {elseif $view == 'plugin'}, {elseif $faq_plugin.this_faq.category}, {elseif $faq_plugin.subcategories} und {elseif $view == 'categories'} für alle Seiten abgefragt werden, was die Sache bei einer Änderung ziemlich verkompliziert.

Ah, ich erinnere mich

Die „Modularisierung“ der Navigation (wäre sie nicht modularisiert, wäre das Problem übrigens dasselbe) habe ich in erster Linie eingesetzt, damit diese Navigation für Euch wartbar bleibt -- je kleiner die Teile, in die man sie aufsplittet, umso weniger fehleranfällig wird das Gesamtkonstrukt. Zudem war (und ist) es wie erwähnt unmöglich, die von Euch gewünschte Navigationsstruktur in s9y dynamisch generieren zu lassen, einfach deshalb, weil in beiden Navigationen munter Links auf verschiedene Quellen (Kategorien, statische Seiten usw.) vermischt werden.

s9y bietet z.B. ein Seitenleisten-Plugin, um eine Liste der statischen Seiten auszugeben (mit dem allerdings die currpage-Methode auch nicht funktionieren würde) -- aber keine „eierlegende Wollmilchsau“, die einem eine Navigation „einmal mit allem (und scharf )“ generiert.

So. Was tun?

Man müsste irgendwie™ das hart einkodierte href-Attribut auslesen, mit der URL der aktuellen Seite vergleichen und bei Übereinstimmung eine CSS-Klasse zuweisen. Für meine Begriffe schreit das nach Javascript (funktioniert dann halt auch nur bei Besucher, die JS aktiviert haben), aber möglicherweise fällt jemand anderem noch eine bessere, serverseitige Lösung ein.

Garvin?

YL

[yellowled]

So. Was tun?

Alles zurück, ich bin wirr.

Ich bin mir jetzt nicht sicher, ob Du das nachträglich implementiert hast oder ob ich das noch gemacht habe, aber im Moment markiert die Hauptnavigation ja bereits den aktiven Link, z.B. so:

Code: Select all

<li><a style="color:#184E8B; background-color:#ffffff;" href="{$serendipityBaseURL}kontakt.html">Kontakt</a></li>

Dasselbe kann man natürlich in den .tpl-Dateien für die jeweilige Seitenleisten-Navigation genauso machen -- ebenso könnte man hier anstelle des inline-Styles einfach eine CSS-Klasse zuweisen:

Code: Select all

<li><a class="active" href="{$serendipityBaseURL}kontakt.html">Kontakt</a></li>

die man dann per CSS hervorhebt:

Code: Select all

#navi a.active { ... }

bzw.

Code: Select all

.areanav a:active { ... }

Das Problem ist nur, dass dieselbe .tpl-Datei für die Seitenleisten-Navigation an unterschiedlichen Punkten (sprich: mit unterschiedlichen active-Links) benutzt wird, insofern müsste man hier die $currpage-Variable nutzen.

Am Beispiel der sidenav_hort.tpl:

Code: Select all

<li><a href="{$serendipityBaseURL}categories/15-Aktuell">Aktuell</a></li>

müsste funktionieren als

Code: Select all

<li><a{if $currpage=='{$serendipityBaseURL}categories/15-Aktuell'} class="active"{if} href="{$serendipityBaseURL}categories/15-Aktuell">Aktuell</a></li>

... und das müsste man halt in jeder .tpl-Datei für die Sidebar-Navi für jeden Link machen. Denke ich. Keine Garantie. Puh. Mein Kopf raucht.

YL

[search1]

Hallo yellowled,
...danke für die Antwort und das Kopfrauchen

Ich bin mir jetzt nicht sicher, ob Du das nachträglich implementiert hast oder ob ich das noch gemacht habe, aber im Moment markiert die Hauptnavigation ja bereits den aktiven Link

Die mainnav.tpl mit den ganzen einzelnen folgenden *.tpl (wie etwa der mainnav_start.tpl) sind von uns programmiert, um in jeder einzelnen *.tpl alle Links zu wiederholen und nur den aktiven über style= zu markieren. Hiervon würden wir auch gerne wegkommen, beim Seitenmenü sowieso. Bei Deiner Lösung wäre das tolle, dass jeder Link nur einmal mit der if-Abfrage behandelt werden muss!

Hab Deine Anregungen umgesetzt:
in der eingenes_Template/style.css:

Code: Select all

#navi a.active {
    color:#184E8B;
    background-color:#ffffff;
}

.areanav a:active {
    color:#184E8B;
    background-color:#ffffff;
}

In der eigenes_Template/index.php als Beispiel in einem Hauptmenü-Link:

Code: Select all

<li><a{if $currpage == '{$serendipityBaseURL}' class="active"{/if} href="{$serendipityBaseURL}">Start</a></li>

sowie als Beispiel ein Link in der eigenes_Template/sidenav_kinderhaus.tpl:

Code: Select all

<li><a {if $currpage == '{$serendipityBaseURL}categories/19-Aktuell}' class="active" {/if} href="{$serendipityBaseURL}categories/19-Aktuell">Aktuell</a></li>

Leider funktionieren beide Beispiele nicht: Es erscheinen keine Fehlermeldungen, aber die Hintergrundfarbe ist beim Link der gerade angezeigten Seite auch nicht geändert. Es wäre schön, wenn es eine serverseitige Lösung gibt...

[yellowled]

Leider funktionieren beide Beispiele nicht: Es erscheinen keine Fehlermeldungen, aber die Hintergrundfarbe ist beim Link der gerade angezeigten Seite auch nicht geändert. Es wäre schön, wenn es eine serverseitige Lösung gibt...

Wenn ich dazu komme, sehe ich mir das gerne am Wochenende nochmal an. Es wäre möglich (das an dieser Stelle zunächst als „Gedächtnisstütze“ für mich), dass die https-Geschicht da irgendwie in die Suppe spuckt, aber vorerst bitte einfach alles so lassen, wie es derzeit ist, damit ich es auf Fehler prüfen kann.

Eine Möglichkeit für eine komplett serverseitige bzw. dynamische Lösung sehe ich, offen gesagt, aufgrund der von Euch gewünschten Navigationsstruktur nicht. Theoretisch könnte man eine dynamische Hauptnavigation und mehrere dynamische Bereichsnavigationen implementieren, aber bei dieser Menge wird das nicht nur unübersichtlich bis zur Unwartbarkeit, es dürfte so langsam auch ein Performanceproblem geben.

YL

[search1]

Wenn ich dazu komme, sehe ich mir das gerne am Wochenende nochmal an.

Das ist ja nett!

bitte einfach alles so lassen, wie es derzeit ist, damit ich es auf Fehler prüfen kann.

...habe mit einem offline-Testsystem getestet; daher ist online nichts von den Code-Änderungen zu sehen...

Liebe Grüße
search1

[yellowled]

bitte einfach alles so lassen, wie es derzeit ist, damit ich es auf Fehler prüfen kann.

...habe mit einem offline-Testsystem getestet; daher ist online nichts von den Code-Änderungen zu sehen...

Äh. Ja, sehe ich. Nur: Dann kann ich natürlich nicht gucken, was da schief läuft. Zudem ist es je nach Setup durchaus denkbar, dass diese Geschichte in einer Testumgebung nicht funktioniert, dass käme auf die Testumgebung an.

YL

[search1]

Hallo yellowled,

hab die Änderungen in der /test/templates/eingenes_Template/style.css und /test/templates/eigenes_Template/sidenav_kinderhaus.tpl life gestellt in einer Testversion, die einfach vor der Adresse mit test. beginnt und sich im Ordner /test befindet.
Aber auch damit waren im Kinderhaus-Seitenmenü keine Änderungen zu sehen.
Habe auch stets den Ordner /test/templates_c gelöscht, da bei mir in der Vergangenheit erst hiernach eine Änderung am Menü sichtbar wurde.
Gerne, wenn Dir ein Fehler bei meiner Lösung auffällt oder die Idee zu einer anderen Lösung kommt...

Danke und viele Grüße
search1

[yellowled]

hab die Änderungen in der /test/templates/eingenes_Template/style.css und /test/templates/eigenes_Template/sidenav_kinderhaus.tpl life gestellt in einer Testversion, die einfach vor der Adresse mit test. beginnt und sich im Ordner /test befindet.

Ich kann nur raten, sowas gleich live zu machen. Gerade hier, mit https etc. pp., kann so viel quer schießen, da ist so eine Testumgebung nicht unbedingt aussagekräftig. Und es lässt sich ja recht simpel so testen, dass man garantiert nichts zerschießt.

Es sei denn ...

Aber auch damit waren im Kinderhaus-Seitenmenü keine Änderungen zu sehen.

... man hat Tippfehler in der betreffenden tpl-Datei. In Deinem Fall fehlte die schließende geschweifte Klammer '}'. Solche Flüchtigkeitsfehler vermeidet man übrigens am besten mit einem vernünftigen™ Editor, der die Klammern automatisch schließt. (Wobei es recht schwierig ist, einen mit Smarty-Unterstützung zu finden.)

Nachdem es korrekt aber auch nicht funktionierte, habe jetzt mal eine Debug-Ausgabe eingebaut. Die macht nichts anderes als $currpage und $currpage2 auszugeben, aber damit sieht man sofort, was das Problem ist: Die Variablen enthalten nicht die korrekten Werte, was vermutlich (da bin ich echt kein Experte) an Eurem https-Zertifikat liegt. Somit sind die Variablen $currpage/$currpage2 hier nutzlos, sie wären es auch, wenn die Navigationen nicht statisch wären.

Ich würde jetzt wirklich langsam überlegen, ob so eine Kleinigkeit wie die Markierung eines Menüpunktes in der Sekundärnavigation diesen Aufwand überhaupt noch lohnt.

YL

[search1]

Danke für die Antwort!
Was für einen (kostenlosen) Editor verwendest Du? Bin bisher ganz zufrieden mit dem Notepad++, keine Ahnung, ob der mit irgendwelchen Einstellungen Klammern automatisch schließt?
Wir wollen unbedingt das Seitenmenü markieren; man hat sonst keine Ahnung, wo man sich gerade befindet. Im Notfall dann halt nicht serverseitig, aber vielleicht hat ja noch jemand eine Idee?

[yellowled]

Was für einen (kostenlosen) Editor verwendest Du? Bin bisher ganz zufrieden mit dem Notepad++, keine Ahnung, ob der mit irgendwelchen Einstellungen Klammern automatisch schließt?

Keine Ahnung, ich verwende GEdit auf einem Linuxsystem.

Im Notfall dann halt nicht serverseitig, aber vielleicht hat ja noch jemand eine Idee?

Es könnte sein, dass es funktioniert, wenn man die URL in der if-Anweisung komplett hart einkodiert, also inklusive https://usw. anstelle des {$serendipityBaseURL}, da diese Variable offensichtlich irgendwie™ Schwierigkeiten mit dem Zertifikat hat. Macht das Ganze natürlich noch statischer und noch komlizierter zu warten.

Alternative: Javascript. Funktioniert dann nur für Besucher, die JS aktiv haben. Per JS die Link-URL speichern, mit der URL der aktuellen Seite vergleichen und bei Übereinstimmung die Klasse setzen. Könnte bei dieser Menge an Links schon in puncto Performance stinken.

Mehr fällt mir nicht ein.

YL

[search1]

Hallo yellowled,

möchte mich bei Dir ganz herzlich bedanken, jetzt geht die Markierung der Menüpunkte.
Problem war bisher ein einziger falscher Doppelpunkt:

Code: Select all

.areanav a:active {
    color:#184E8B;
    background-color:#ffffff;
}

Ersetzt man diesen mit:

Code: Select all

.areanav a.active {
    color:#184E8B;
    background-color:#ffffff;
}

und verwendet $currpage2:

Code: Select all

   <li><a {if $currpage2 == '/categories/19-Aktuell'} class="active"{/if} href="{$serendipityBaseURL}categories/19-Aktuell">Aktuell</a></li>

klappt alles wunderbar.
Danke.

Einzige Steigerung wäre noch, wenn man etwa mit einer anderen Hintergrundfarbe markieren könnte, wenn man sich innerhalb eines Eintrags innerhalb eines Seitenmenüs befindet. Momentan wird das Seitenmenü logischerweise nur als "active" markiert, wenn es sich in der Übersichtsvariante befindet.
Hast Du hierzu eine Idee?

[yellowled]

Einzige Steigerung wäre noch, wenn man etwa mit einer anderen Hintergrundfarbe markieren könnte, wenn man sich innerhalb eines Eintrags innerhalb eines Seitenmenüs befindet. Momentan wird das Seitenmenü logischerweise nur als "active" markiert, wenn es sich in der Übersichtsvariante befindet.
Hast Du hierzu eine Idee?

Sehr theoretisch könnte man das hinbiegen, indem man die Kategorie der Artikels ermittelt (könnte bei multipler Kategoriezuordnung haarig werden, falls Ihr sowas benutzt) und irgendwie™ auswertet, aber das ist nicht ganz trivial, weshalb ich jetzt auch nicht ein Codebeispiel liefern kann, ohne stundenlang knietief in der Template-Dokumentation zu waten.

YL