"current"-Status bei Links

[Enrico]

Hallo,

ok, das Thema https://forum.selfhtml.org/?t=199749&m=1344850 können wir gutgelaunt abhaken, ich bin jetzt wieder auf einen div-Bereich zurückgekehrt, die Einbindung des jeweiligen html-Codes über php klappt auch einwandfrei :-)

Jetzt gilt es als letzte Amtshandlung für Heute nur noch das Problem zu lösen, wie ich den "current"-Status bei Links über PHP am Geschickesten umsetzen kann.

Unser Menü besteht aus 13 Menüpunkten, jeweils mit eigenen "hover"-Definitionen. Einzeln deshalb, weil ich die Links auch gleichzeitig positioniere. Den "hover"-Effekt bewerkstellige ich durch Verschieben der Hintergrundgrafik der Links.

Jetzt möchte ich gerne noch den "current"-Status optisch zum Ausdruck bringen, hier habe ich aber leider nur reine optische Formatierungen im Internet gefunden, aber nichts, was mir das "current" direkt im Tag ersparen würde.

Ich frage zu Beginn meiner php-Datei den angeklickten Link per Auslesen der URL ab, das ist kein Thema, aber wie bekomme ich den Zusatz "current" im Link-Tag am Besten umgesetzt?

Muß ich wirklich einen sehr aufgeblähten "switch" einbauen und somit 13 Links über PHP zusammensetzen lassen oder ginge das auch einfacher?

Gruß
Enrico

[bleicher]

Grüße,
ohne details zu kennen, schwer zu sagen, es hört sich aber merh nach css als php problem an.
könntest du das ganze etwas genauer erläutern?
die notwendigkeit 13 links einzeln zu positionieren, spricht übrigens für schlechte design-grundidee.
MFG
bleicher

[Enrico]

Grüße zurück, Bleicher,

ohne details zu kennen, schwer zu sagen, es hört sich aber merh nach css als php problem an

Hier - auszugsweise - die Definition zweier Links:

a.Rechtliches:hover,
   a.Rechtliches:active
   {
      background-position: 0px -39px;
   }

a.Dartsport:focus,
   a.Rechtliches:focus
   {
      outline: none;
   }

a.Dartsport:visited,
   a.Rechtliches:visited
   {
      background-position: 0px 0px;
   }

a.Dartsport
   {
      background: url("../Grafiken/Menuepunkte/Dartsport.png") no-repeat;
      display:    block;
      height:     39px;
      left:       606px;
      position:   absolute;
      bottom:     2px;
      width:      100px;
   }

a.Rechtliches
   {
      background: url("../Grafiken/Menuepunkte/Rechtliches.png") no-repeat;
      display:    block;
      height:     39px;
      left:       738px;
      position:   absolute;
      bottom:     2px;
      width:      114px;
   }

die notwendigkeit 13 links einzeln zu positionieren, spricht übrigens für schlechte design-grundidee

Wenn Du wüsstest, wie lange ich mir den Kopf zermartert habe, für unseren Dartverein ein passendes Konzept zu finden ;-)

Letztendlich bin ich bei einer grünen Schreibtafel gelandet, die ja auch in Kneipen zum Anschreiben der Stände verwendet wird, als Hintergrund dunkle, gealtete Holzplanken. Am oberen Bildschirmrand befinden sich 6 Links, am unteren Bildschirmrand die verbleibenden 7, von der Tafel sieht man nur den linken und rechten Rand nebst grüner Füllung.

Ich habe die oberen und unteren Links jeweils mit gleichem Abstand zueinander ausgerichtet und da die Links aus reinen grafischen Schriftzügen bestehen blieb mir nichts anderes übrig, als diese einzeln zu positionieren.

Ok, ich hätte wohl auch mit einer Liste arbeiten können und "padding", aber das will ich jetzt (eigentlich) nicht mehr umschmeisen, weil es funktioniert.

So weit der Ausflug in unser Design.

Die Links selber sind folgendermaßen aufgebaut - wie üblich:

<a class="Dartsport" href="Index_3.php?Auswahl_Menue=Dartsport"></a>
   <a class="Rechtliches" href="Index_3.php?Auswahl_Menue=Rechtliches"></a>

"onmouseover" und "onmouseout" über css-Definitionen klappen einwandfrei, aber current wird ja direkt im Tag notiert:

<a class="Dartsport" href="Index_3.php?Auswahl_Menue=Dartsport" current></a>

Die Abfrage nach dem angeklickten Link erfolgt wie folgt:

<?php

if (isset($_GET["Auswahl_Menue"]))
      {
         $Auswahl_Menue = $_GET["Auswahl_Menue"];
      }
      else
      {
         $Auswahl_Menue = "Erster Aufruf";
      }

?>

Dies war aber nur ein Test, ob es funktioniert, die letztendliche Funktionalität wird noch eingebaut.

Mein Problem ist nun, wie ich 12 Links normal und den angeklickten Link als "current" darstellen kann, ohne den besagten riesigen "switch" einbauen zu müssen:

<?php

if (isset($_GET["Auswahl_Menue"]))
      {
         $Auswahl_Menue = $_GET["Auswahl_Menue"];
      }
      else
      {
         $Auswahl_Menue = "Neuigkeiten";
      }

$Menuepunkte = "";

switch ($Auswahl_Menue)
      {
         case "Neuigkeiten":
         {
            $Menuepunkte = '<a class="Neuigkeiten" current></a>';
            $Menuepunkte .= '<a class="Ankuendigungen" href="Index_3.php?Auswahl_Menue=Ankuendigungen"></a>';
            $Menuepunkte .= '<a class="Vereinsheim" href="Index_3.php?Auswahl_Menue=Vereinsheim"></a>';
            ...
            break;
         }

case "Ankuendigungen":
         {
            $Menuepunkte = '<a class="Neuigkeiten" href="Index_3.php?Auswahl_Menue=Neuigkeiten"></a>';
            $Menuepunkte .= '<a class="Ankuendigungen" current></a>';
            $Menuepunkte .= '<a class="Vereinsheim" href="Index_3.php?Auswahl_Menue=Vereinsheim"></a>';
            ...
            break;
         }

case ...
      }

?>

Und diesen "switch" möchte ich, sofern möglich, vermeiden, weil ich hier, jetzt nur die Aufbauten der Links gerechnet, 169 Zeilen hätte.

Gruß,
Enrico

[eneR]

Hihö,
Wenn ich dich richtig verstehe liegt die Antwort auf der Hand.

Anstatt ewig zu switchen mache folgendes:

$Menuepunkte = '<a class="Neuigkeiten"
if ($Auswahl_Menue == "Neuigkeiten") {
  $Menuepunkte .= 'current';
}
$Menuepunkte .= '></a>';
}
$Menuepunkte .= '<a class="Aktuelles"
if ($Auswahl_Menue == "Aktuelles") {
  $Menuepunkte .= 'current';
}
$Menuepunkte .= '></a>';
}

usw usw

Und diesen "switch" möchte ich, sofern möglich, vermeiden, weil ich hier, jetzt nur die Aufbauten der Links gerechnet, 169 Zeilen hätte.

»»
Jop nimm if^^

Gruß,
Enrico

Dir noch ne Schöne Nacht : )

[Enrico]

Salute eneR,

Wenn ich dich richtig verstehe liegt die Antwort auf der Hand.

Ist nur die Frage, wie groß die Hand ausfällt ;-)

Anstatt ewig zu switchen mache folgendes:

$Menuepunkte = '<a class="Neuigkeiten"
if ($Auswahl_Menue == "Neuigkeiten") {
  $Menuepunkte .= 'current';
}
$Menuepunkte .= '></a>';
}

Prinzip verstanden, was mich zu Deinem abschliessenden Wunsch führt ;-)

Ob die Nacht so gut wird, stellt sich noch raus ;-)

Aber "if" ist ja dann nicht wirklich eine Schmälerung der Arbeit, die mir dann blüht.

Ich befürchte, da komme ich aber nicht herum ?!?

Gruß
Enrico

[eneR]

Guten "Morgen" :P

Aber "if" ist ja dann nicht wirklich eine Schmälerung der Arbeit, die mir dann blüht.

Jain. Man muss nicht immer wieder die gleichen Zeilen schreiben.

Ich befürchte, da komme ich aber nicht herum ?!?

Man kann es noch mit einem Array machen:

<FehlerhafterCode attr="unschön">

$a = {Neuigkeiten, etc, etc, etc };  
for ($a as $b) {  
 $Menuepunkte .= '<a class="'.$b.'"';  
 if ($b == $Auswahl_Menue) {  
  $Menuepunkte .= ' current';  
 }  
 $Menuepunkte .= '></a>';  
}

</FehlerhafterCode>

Aber so ein richtig 100%iges Patenrezept gibtz imho net :S

Ob die Nacht so gut wird, stellt sich noch raus ;-)

Da kann man ja zum Glück Einfluss drauf nehmen :P

[Enrico]

Guten Morgähn, eneR ;-)

Man kann es noch mit einem Array machen:

$a = {Neuigkeiten, etc, etc, etc };

for ($a as $b) {
$Menuepunkte .= '<a class="'.$b.'"';
if ($b == $Auswahl_Menue) {
  $Menuepunkte .= ' current';
}
$Menuepunkte .= '></a>';
}

  
Mensch, logisch, mit einem Array ist es ja viel kompakter, schöner Lösungsansatz, der mir sehr zusagt :-)  
  

> Da kann man ja zum Glück Einfluss drauf nehmen :P  
  
Echt? Wer ist "man"? ;-)  
  
Ok, dann mache ich mich mal an's Werk.  
  
Danke für Deine Unterstützung.  
  
Gruß  
Enrico

[Tom]

Hello,

ohne details zu kennen, schwer zu sagen, es hört sich aber merh nach css als php problem an.

CSS alleine kann hier nicht helfen, da CSS alleine nicht wissen kann, dass der betroffene Menupunkt der aktuelle sein soll. Stell Dir bitte den zeitlichen Ablauf vor:

Du klickst auf einen Link. Der ist dann kurze Zeit der "current"-Link. Dann wird der Request ausgeführt und die Seite nebst Menu wird in der Response neu ausgelifert. Für CSS ist also wieder alles auf Anfang. Auf der angezeigten Seite wurde noch nichts ausgewählt.

Du müsstest also das zugehörige CSS anpassen.
Besser ist es, es entsprechend vorzubereiten und dem Link eine Klasse mitzugeben.
Noch besser ist es, den aktuellen "current"-Menupunbkt gar nicht mehr als Link darzustellen, aber das hat Gunnar schon geschrieben: https://forum.selfhtml.org/?t=199757&m=1344965

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Enrico]

Hallo Tom,

CSS alleine kann hier nicht helfen, da CSS alleine nicht wissen kann, dass der betroffene Menupunkt der aktuelle sein soll. Stell Dir bitte den zeitlichen Ablauf vor

Stimmt, denn die Seite ist ja nach dem Anklicken neu geladen.

Noch besser ist es, den aktuellen "current"-Menupunbkt gar nicht mehr als Link darzustellen

Diesen Gedanken hatte ich auch eben und das ist ja kein Thema, wobei ich hier vielleicht noch einen Schritt weiter gehen und das Menü generell nicht als Links über HTML, sondern als anklickbare und eine Weiterleitung verursachende Grafiken erstellen könnte ("div" anstatt "a" und Kombination aus "cursor" im CSS und Javascript zur Weiterleitung) mit eigenen Klassen, auch für den "current"-Status.

Liebe Grüße aus dem bewölkten Landshut zurück
Enrico

[Gunnar Bittersmann]

@@Enrico:

nuqneH

ok, das Thema https://forum.selfhtml.org/?t=199749&m=1344850 können wir gutgelaunt abhaken, ich bin jetzt wieder auf einen div-Bereich zurückgekehrt, die Einbindung des jeweiligen html-Codes über php klappt auch einwandfrei :-)

Schön. Du hast die Vorteile serverseitiger Techniken gegenüber (I)Frames aber noch nicht ausgereizt.

Jetzt gilt es als letzte Amtshandlung für Heute nur noch das Problem zu lösen, wie ich den "current"-Status bei Links über PHP am Geschickesten umsetzen kann.

Indem der Menüpunkt gar kein Link ist: „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Auch das könnte die serverseitige Technik erledigen.

Qapla'

[Enrico]

Hallo Gunnar,

(Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Ok, darüber sollte wohl wirklich nachgedacht werden, das habe ich aber noch nicht gehört, dass das vermieden werden sollte.

Auch das könnte die serverseitige Technik erledigen.

Ich werde sehen, wie ich das umsetzen kann, das wäre - für mich - dann das Fein-Tuning, wenn alles soweit funktioniert.

Auch Dir Danke für Deine Unterstützung.

Gruß
Enrico

[[Danke] Enrico]

Hallo,

jetzt funktioniert es soweit schon wie beabsichtigt, Danke an alle, die mir geholfen haben.

Das einzige optische Problem, das ich jetzt noch habe, ist, dass sich der Mauszeiger über einem "current"-Link erst nach kurzem Bewegen der Maus in den Standard-Cursor (Pfeil) ändert, nicht aber unmittelbar beim Aufbau der Seite.

Muß mal schauen, wie ich das noch hinbekomme.

Gruß
Enrico

[Der Martin]

Hi,

Das einzige optische Problem, das ich jetzt noch habe, ist, dass sich der Mauszeiger über einem "current"-Link erst nach kurzem Bewegen der Maus in den Standard-Cursor (Pfeil) ändert, nicht aber unmittelbar beim Aufbau der Seite.

das ist AFAIS eine Schwäche mancher Browser, die die Gestalt des Mauszeigers erst aktualisieren, wenn er sich bewegt.

Ciao,
 Martin

[Enrico]

Hallo Martin,

das ist eine Schwäche mancher Browser

Ok, dann werde ich hier nichts "bewegen" können, danke Dir für Deine Antwort.

Gruß
Enrico