Spry Menüleiste - Status "active" trotz Vorlage möglich?

[Hanimoon]

Hallo!

Meine Spry Navigationsleiste liegt in einem nicht editierbaren Bereich einer Vorlage. Ich möchte gerne das die jeweilig aktive Seite oben im Menü in einer anderen Farbe erscheint, damit die User wissen, wo in der Navigation sie sich gerade befinden.

Meine erster Ansatz war im style.css folgenden code zu definieren:

#.active { background:url(../img/navi/navibackgroundhover.gif); /* current navigation element stays highlighted */}

Und dann auf der jeweilen Seite im jeweiligen Menüpunkt hinter den hyperlink die classe .active zu hinterlegen

<a href="index.html" class="aktiv">Home</a></li>

Aber dadurch das ich auf den einzelnen Seiten nicht auf den Navigationscode zugreifen kann, kann ich auch die Klasse nicht hinzufügen. Wo liegt mein denkfehler?

Wäre dankbar, wenn jemand mir hierbei noch mal helfen könnte!

LG
Hanimoon

 

[threadi]

In deinem ersten Code steht ein # am Anfang. Das gehört dort so nicht hin.

Dann schreibst Du oben .active, unten aber "aktiv" - musst dich für eine Klasse entscheiden ;)

 

[bodil]

Theoretisch gibt es eine Pseudolklasse :active, die Links annehmen, wenn sie angeklickt werden. Das Problem: Im selben Moment wird die Seite neu geladen und der Link ist nicht mehr aktiv.
Wenn du an den Code der Navigation nicht drankommst, ist das mit HTML nicht lösbar.
Was du machen könntest: nach dem Laden der Seite mit Javascript die URL abfragen und dann dem passenden Bereich (z.B. dem Link) die passende Klasse verpassen.

 

[Hanimoon]

threadi, sollte nur ein beispiel für mein vorgehen sein aber du hast natürlich recht

bodil, wie kann man denn eine spry navigation in Dreamweaver anbieten, die nicht einmal das attribute active unterstützt??? Sollte dies nicht selbstverständlich sein? Ich komme mehr und mehr zu dem Schluss nie wieder mit spry navi zu arbeiten. am liebsten würde ich den ganzen Mist raushauen!

Dein vorgehens Vorschlag klingt richtig aufwendig und kompliziert :cry: ich frag mich gerade ernsthaft, ob sich der aufwand lohnt, oder ob es nicht einfacher wäre die Navi raus zu schmeissen und nochmal von vorne (manuell) anzufangen? Was meinst du?

LG
Hanimoon

 

[bodil]

[...], und das veraltete Spry braucht doch heute wirklich keiner mehr.

[...](Achtung: von Spry habe ich keine Ahnung ... [...]) )

Was mich (als DW-Benutzer) erstaunt, ist, dass DW einen Code zur Verfügung stellen soll, der sich anschließend nicht mehr editieren lassen soll. Hast du keine HTML-Dateien, die du auf deinen Server schiebst? Und kannst du die nicht vorher nochmal aufmachen und Klassennamen einbauen? Das Javascript wäre btw. ein Vierzeiler.

 

[Cheffchen]

Hallo,

also

Aber dadurch das ich auf den einzelnen Seiten nicht auf den Navigationscode zugreifen kann, kann ich auch die Klasse nicht hinzufügen. Wo liegt mein denkfehler?

ganz großen fragezeichen, wie kommt denn das Spry menü dort hin? die hand Gottes?

wie kann man denn eine spry navigation in Dreamweaver anbieten, die nicht einmal das attribute active unterstützt???

na in dem jeder normale Admin natürlich an sein code kommt und jede aktiven Seite ganz einfach per php ein classe aktiv geben kann.

ich frag mich gerade ernsthaft, ob sich der aufwand lohnt, oder ob es nicht einfacher wäre die Navi raus zu schmeissen

ich denke kommst an den code nicht rann?
zum löschen und was neus einfügen kannst, wo das gleiche machen müsstest, kommst aber nicht rann?

Die sache mit Javascript ist zwar eher suboptimal aber wenn mal etwas suchst findest die 5 zeilen code im internet die ja bloss einfügen brauchst.

Cheffchen

 

[Hanimoon]

Also das mit der Vorlage konnte ich beheben. Über die Funktion: modifizieren/vorlage/markup löschen hat es ja nicht funktioniert.
Aber ich konnte manuell einfach einen editierbaren bereich in das HTML Dokument einfügen mit:

<!-- TemplateBeginEditable name="Navi" -->

So, nun dachte ich, ich kann so vorgehen wie in meinem ersten Post gedacht und einfach auf den einzelnen Seiten, die

class="active"

hinter jedem Hyperlink setzten.
Nun weiss ich allerdings nicht, wo genau ich die class active definieren soll? Im style.css oder im SpryMenüBarHorizontal.css?

In letzteres gibt es ja bereits folgende definition

ul.MenuBarActive
{
 z-index: 1000;
 background-color: #EEE;
 background-image: url(../img/navi/navibackgroundhover.gif);
 background-repeat: repeat-x;
}

Kann ich diese einfach anpassen?

Und wenn ich es doch im style.css definieren muss, welche ID muss dort herangezogen werden? Diese habe ich schon drin:

.twoColFixRtHdr #navi {
 width: 804px;
 height: 32px;
 font-weight: bold;
 clip: rect(auto,auto,auto,auto);
}

Kann ich hier einfach:

active:background.....

angeben?

Sorry, aber das Thema ist für mich echt sehr undurchsichtig. Mit jquery habe ich es auch probiert, allerdings hat er mir dann meine spry menüleiste danach komplett raus geschmissen und meine Vorlage war leer :?: Gott sei dank hatte ich vorher einen Backup gemacht.

LG
Hanimoon

 

[bodil]

Nun weiss ich allerdings nicht, wo genau ich die class active definieren soll? Im style.css oder im SpryMenüBarHorizontal.css?

Geschmacksache. Dort, wo du sie am ehesten wiederfindest.

Kann ich diese einfach anpassen?

Die hat nichts mit deinem Problem zu tun. Du veränderst ein li- oder ein a-Element.

active:background.....

Nein. Je nach dem, wo du es dir gelingt, ein class='active' unterzubringen, baust du die entsprechende Definition in deine css-Datei ein. Beim Mouseover, bekommen deine Links (a) eine eigene Klasse zugewiesen. Um auf Nummer sicher zu gehen, würde ich daher in in die li-Elemnte ein class='aktiv' hinzufügen, denn dein Spry verändert ja die Klasse des Links. Soll dein aktiver Link genauso aussehen wie ein Link beim Mouseover würdest du ensprechend den vorhandenen Definitionen wie (Zeile 118)

ul.MenuBarHorizontal  a.MenuBarItemHover,
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
    color: #FFFFFF;
}

und (Zeile 109)

ul.MenuBarHorizontal a:hover,
ul.MenuBarHorizontal a:focus {
    background-image: url("../img/navi/navibackgroundhover.gif");
    background-repeat: repeat-x;
    color: #FFFFFF;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 100%;
}

ergänzen

ul.MenuBarHorizontal li.aktiv  a {
    background-color: #EEEEEE;
    background-image: url("../img/navi/navibackgroundhover.gif");
    background-repeat: repeat-x;
    color: #FFFFFF;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 100%;
}

Dann passiert all das, was bei einem Mouseover passiert (und dein Spry dem überquerten Element die Klasse MenuBarItemHover zuweist) auch dann, wenn das li die Klasse aktiv hat.

 

[Hanimoon]

So hat es geklappt! Das war der Schlüssel! Ich danke Dir Bodil.

Hier noch mal für alle die es interessiert zusammen gefasst in Code form:

Ich habe im SpryMenüBar.css folgenden Code neu hinzugefügt:

ul.MenuBarHorizontal li.activ a 
{
 background-color: #FFF; 
 color: #FFFFFF;
 font-family: Tahoma,Geneva,sans-serif;
 font-size: 100%;
 background-image: url(../img/navi/navibackgroundhover.gif);
 background-repeat: repeat-x;
}

Dadurch spreche ich das Verhalten der Links in meiner Navigation an, die den Status "active" haben an und weise Ihnen die selbe Hintergundfarbe (bzw. Bild) zu wie beim Hoover Effekt.

Dann wird auf der jeweils aktiven Seite im Navigationsmenü die Klasse hinterlegt ( in diesem Beispiel die Index Seite):

ul id="MenuBar1" class="MenuBarHorizontal">
      <li class="activ"><a href="index.html" >Home</a></li>
      <li><a href="ourtours.html">Our Tours</a></li>
      <li><a href="schedules.html">Schedule</a></li>
   <li><a href="gallery.html" class="MenuBarItemSubmenu">Gallery</a>
         <ul>
          <li><a href="GalleryRiyadh.html">Riyadh City Tour</a></li>
          <li><a href="GalleryShagraa.html">Shagraa</a></li>

usw.

Ich hoffe ich habe das einigermaßen verständlich dargestellt.

Vielen Herzlichen Dank nochmal an Dich Bodil fürs Anknipsen meiner "Glühbirne"

LG
Hanimon