Pseudoklasse :focus

[uwe]

Hallo zusammen,

durch Zufall bin ich auf eine Designidee gestoßen, die mir wirklich gut gefällt und die ich gerne in etwas abgewandelter Form einsetzen möchte:

http://www.cssplay.co.uk/menu/one_page.html

Statt bei :hover den Tab Inhalt sofort wieder auszublenden, würde ich es allerdings lieber sehen, wenn der alte Inhalt sichtbar bleibt und erst bei :focus eines anderen Tabs ausgeblendet und durch einen neuen Inhalt ersetzt wird. Ist das überhaupt möglich?

Bisher dachte ich immer, daß man die Pseudoklassen :hover und :focus auf andere Elemente anwenden kann, aber bei :focus scheint das nicht zu funktionieren. Ich beiße mir nun schon seit Stunden die Zähne daran aus, im o.g. Beispiel das :hover zu ersetzen und die gewünschte Funktionalität zu erreichen, aber leider ohne Erfolg. Hat jemand eine Idee?

Danke

Uwe
Portland, Oregon

[Shepard (nl)]

Hi,

Statt bei :hover den Tab Inhalt sofort wieder auszublenden, würde ich es allerdings lieber sehen, wenn der alte Inhalt sichtbar bleibt und erst bei :focus eines anderen Tabs ausgeblendet und durch einen neuen Inhalt ersetzt wird. Ist das überhaupt möglich?

Nur mit (X)HTML und CSS wohl nicht, woher soll das eingeblendete <ul> denn wissen, wann ein anderes Element den Fokus erhält?

Shepard

[uwe]

Hi Shephard

... woher soll das eingeblendete <ul> denn wissen, wann ein anderes Element den Fokus erhält?

Bei :hover weiß das <ul> doch auch, wann sein Elternelement ein :hover empfängt. Wieso also nicht bei :focus?

Cheers

Uwe
Portland, Oregon

[Shepard (nl)]

Bei :hover weiß das <ul> doch auch, wann sein Elternelement ein :hover empfängt. Wieso also nicht bei :focus?

hast Recht, ich habe einmal zu viel um die Ecke gedacht, nämlich beim Ausblenden an das Element, das den Fokus als Nächstes *bekommt*, aber es reicht ja, daß das Element selbst den Fokus *verliert*.

Wofür möchtest Du den Effekt denn nutzen? Wenn es z.B. darum geht, zwischen verschiedenen Seiten zu wechseln, also der Navigation das look-and-feel von tabbed browsing (+ einer Art Vorschau beim :hovern) zu geben, dann könntest Du doch alles so lassen, wie es ist, und beim Klicken die entsprechende Seite tatsächlich aufrufen, den link also als solchen nutzen. Auf dieser Seite würde dann das, was vor dem Klick durch :hover eingeblendet war, den normalen Seiteninhalt darstellen.

Etwas unschön daran wäre, daß diese Navigation auf jeder Seite etwas anders codiert werden müßte, weil das gerade aktive Tab dann ja nicht auf :hover reagieren soll. Diese Änderung pro Seite wäre aber auf eine Klassenangabe im jeweiligen <li> beschränkt.

Shepard

[uwe]

Hi Shepard

Wofür möchtest Du den Effekt denn nutzen?

Im Prinzip war ich am optischen Eindruck eines Tabbed Browsing interessiert - kombiniert mit der Dynamik der verzögerungslosen Darstellung der Inhalte, so wie im Beispiel gezeigt.

Inzwischen bin ich allerdings auf einen billigen Trick gekommen, wie ich es selbst bei Verwendung von :hover bewerkstelligen kann, daß die Inhalte sich nur *dann* verändern, wenn man mit der Maus über einen Tab fährt. Ich hab einfach die Höhe und Breite des Sub Menus so verändert, daß sie ein 100% width/height DIV ausfüllen. Dadurch verschwindet das Menü nicht mehr, sobald man den Bereich des Textes verläßt.

Ciao

Uwe
Portland, Oregon

[uwe]

Hab gerade nochmal Google zu Rate gezogen und siehe da, es ist schon jemand anderes auf dieselbe Idee gekommen. Falls jemand Interesse hat:

http://www.positioniseverything.net/css-dropdowns-red.html#

Uwe

[Mathias Brodala]

Hallo uwe.

durch Zufall bin ich auf eine Designidee gestoßen, die mir wirklich gut gefällt und die ich gerne in etwas abgewandelter Form einsetzen möchte:

http://www.cssplay.co.uk/menu/one_page.html

Statt bei :hover den Tab Inhalt sofort wieder auszublenden, würde ich es allerdings lieber sehen, wenn der alte Inhalt sichtbar bleibt und erst bei :focus eines anderen Tabs ausgeblendet und durch einen neuen Inhalt ersetzt wird. Ist das überhaupt möglich?

Nur wenn du eine geschickte Verschachtelung nutzt. Fokussierbar sind einzig und alleine Links und Formularelemente. Letztere sind aber hier nicht sonderlich praktikabel, weshalb du Links nehmen solltest.

Hier einmal ein minimaler Vorschlag:

li {  
  float:left;  
  list-style:none;  
  padding:0 5em;  
}  
li p {  
  display:none;  
}  
li a:hover+p,  
li a:focus+p {  
  display:block;  
}

<ul>  
  <li>  
    <a href="">Foo</a>  
    <p>Foo Bar Baz Qux</p>  
  </li>  
  <li>  
    <a href="">Bar</a>  
    <p>Bar Baz Qux Foo</p>  
  </li>  
  <li>  
    <a href="">Baz</a>  
    <p>Baz Qux Foo Bar</p>  
  </li>  
</ul>

Hierbei werden die Absätze sowohl beim Hovern, als auch beim Fokus sichtbar. Unterbindest du nun noch per JS die Ausführung der Links, kann man dies auch durch normale Klicks erreichen. Wirklich praktikabel funktioniert das ganze aber leider nur in Firefox und Konqueror.

Einen schönen Mittwoch noch.

Gruß, Mathias

[uwe]

Hi Mathias

danke für das Beispiel. Schade nur, daß letztendlich wohl doch kein Weg an JS vorbeiführt. Gerade dessen Nichtbenutzung hatte mir bei der Web Site so gut gefallen.

Cheers

Uwe
Portland, Oregon