Umsetzung - Navigationsleiste

[orschiro]

Hallo Leute,

wie ließe es sich realisieren, dass beim Öffnen einer Seite, der Listeneintrag 1 der Navigation mit einem Background versehen wird, aber das auch nur so lange, bis ein anderer Listeneintrag ausgewählt wird. Dieser soll dann den Background zugewiesen bekommen. Letzteres zu realisieren habe ich zunächst per CSS mit der Eigenschaft a:focus versucht. Diese hat allerdings den Nachteil, dass der Background aufgehoben wird, sobald der User auf irgendeine andere Stelle der Webseite klickt.

Aber zunächst einmal der Code der Navigationsleiste:

<ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a>
         <ul>
             <li><a href="#">2a</a></li>
             <li><a href="#">2b</a></li>
             <li><a href="#">2c</a></li>
         </ul>
      </li>
      <li><a href="#">3</a>
         <ul>
            <li><a href="#">3a</a></li>
            <li><a href="#">3b</a></li>
            <li><a href="#">3c</a></li>
            <li><a href="#">3d</a></li>
         </ul>
      </li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
</ul>

Im Prinzip greift hier eine CSS-Only-Variante nicht, sodass auf Javascript zurückgegriffen werden muss, oder?

Ich bedanke mich bereits für eure Antworten zu dieser späten Stunde.

 

[claW.]

rein vom logischen her solltes folgendes funktionieren:

<style type="text/css">
ul > li.layer0 {
  background: ...;
}

ul > li.layer0 > ul > li.layer 1 {
  background: ...;
}
</style>

...

<ul>
  <li class="layer0"><a href="#">1</a></li>
  <li class="layer0"><a href="#">2</a>
    <ul>
      <li class="layer1"><a href="#">2a</a></li>
      <li class="layer1"><a href="#">2b</a></li>
      <li class="layer1"><a href="#">2c</a></li>
    </ul>
  </li>
  <li class="layer0"><a href="#">3</a>
    <ul>
      <li class="layer1"><a href="#">3a</a></li>
      <li class="layer1"><a href="#">3b</a></li>
      <li class="layer1"><a href="#">3c</a></li>
      <li class="layer1"><a href="#">3d</a></li>
    </ul>
  </li>
  <li class="layer0"><a href="#">4</a></li>
  <li class="layer0"><a href="#">5</a></li>
  <li class="layer0"><a href="#">6</a></li>
</ul>

allerdings ungetestet und ob es den von dir gewünschten effekt bringt, weiß ich nicht. du hinterlegst halt nur jedes li-element einer bestimmten ebene mit einem background, welche in oben stehender hierarchie auftritt.

 

[Ksu]

Ich habe sowas mal mit javascript gemacht, falls ich den code noch finde dann poste ich ihn.

Ich habe das mit einem onclick event gemacht

onclick="SetActiveBackground(this);"

Dann musst du in der SetActiveBackground Funktion zunächst in einer Schleife die background-color all deiner <li> Elemente auf die Ursprungsfarbe zurücksetzen. Danach kannst du dem <li> Element, welches durch this übergeben wurde, die background-color auf die gewünschte Farbe setzen.

 

[ZeroFlash]

javascript schon in der navigation halte ich persönlich für sehr zweifelhaft...

 

[ag3nt]

Mit welcher Begründung hälst du das für sehr zweifelhaft?
Ich sehe kein Problem daran, wenn du intelligent vor gehst, sprich du lädst zuerst die Struktur, so das ohne Javascript die komplette Navigation angezeigt wird, und mittels Skript schaltest du dann die erweiterten Funktionen zu bzw in diesem Fall blendest du einen Teil aus.
Ganz abgesehen davon gibt es nicht mehr allzu viele Seiten die kein Javascript nutzen, auch wenn es nicht immer auf den ersten Blick auffällt.

 

[ZeroFlash]

einfach aus dem grund heraus, das javascript und seine nutzung ein sicherheitsrisiko darstellen und daher es immer wieder user gibt, die es ausstellen.

für den seitenersteller ist es doch wichtig, möglichst alle zu erreichen und das dann auch so, dass die seite überall gleich aussieht und nicht in seiner funktionalität eingeschränkt ist, optisch wie technisch.

klar, kann man es so umsetzen, dass alles auch ohne js angezeigt wird, nur sollte die gestaltung darunter nicht leiden.

 

[PW-toXic]

google benutzt javascript auf der startseite.
Wenn man jegliche gestaltung ohne javascript machen könnte, bräuchte man kein javascript Das geht aber nicht. Wenn man also eine besondere Gestaltung braucht, benötigt man javascript, und javascript gehört definitiv genauso wie CSS und cookies zu den standard Gestaltungsmöglichkeiten von Webseiten. Das einzig wichtige an der ganzen Sache ist, dass die Webseite prinzipiell auch ohne cookies, ohne css und ohne javascript vom prinzip her lauffähig ist. Bei dem was du allerdings machen möchtest (gestaltung) gibt es allerdings nicht das geringste Problem.

Javascript gehört zum standard repertoire eines Webdesigners.


edit: ohne mir dein Problem genauer angesehen zu haben, bin ich davon überzeugt, dass dies nur mit javascript möglich ist. Und die Lösung (auch wenn nicht die schönste) wurde bereits genannt.