Verschachtelte Verknüpfungen

0
15

Der andere Tag, ich gepostet ein Bild, ganz wörtlich, als eine denkübung, darüber, wie Sie könnte zu erreichen “verschachtelten” links. Das heißt, ein großer container, der die Verknüpfung zu einer URL enthält, die einen kleineren Behälter oder text-link drin, der geht zu einer anderen URL. Das ist schwieriger, als es auf den ersten Blick scheint. Der Hauptgrund dafür ist, dass…

<!– dieses ist ungültig und wird nicht gerendert wie erwartet –>
<a href=”#one”>
Außerhalb
<a href=”#zwei”>
Im inneren
</a>
</a>

Eric Meyer einmal mehr gefordert, flexibel zu verknüpfen, aber auch das nicht ganz verarbeiten eine situation, in der ein link ist geschachtelt innerhalb eines anderen.

Hier ist, was passiert mit HTML, übrigens:

Die verschachtelte Verknüpfung wird gekickt.

Meine erste Neigung wäre einfach nicht verschachtelt die links in der markup, aber Sie verschachtelt sind, optisch. Einige Leute antwortete auf den tweet, einschließlich Nathan Smith, die gemeinsam das gleiche gedacht: haben Sie einen relativ positionierten Eltern-element und absolut positionieren Sie beide links. Die größere könnte man füllen, bis die ganze Gegend und den kleineren, man könnte auf ihm sitzen.

Finden Sie unter dem Stift “Verschachtelten” links von Nathan Smith (@nathansmith) auf CodePen.

Es ist pingelig, wie Sie benötigen, Magische zahlen zu einem gewissen Grad zu behandeln, den Abstand und variable Inhalte.

Meine zweite Neigung wäre zu bewältigen, dass es in JavaScript.

<div
onclick=”Fenster.location=’https://codepen.io'”
style=”cursor: pointer;”
tab-index=”1″
>
Außerhalb
<a href=”https://css-tricks.com”>
Im inneren
</a>
</div>

Ich habe buchstäblich keine Ahnung, wie koscher das ist aus accessibility-Sicht. Es sieht grob zu mir, also werde ich einfach davon ausgehen, es ist eine schlechte Nachricht.

Apropos Barrierefreiheit, Heydon Pickering hat einen ganzen Artikel über das Karte-Komponenten, ist ein beliebtes design-Muster, in denen diese situation oft kommt. Seine Lösung ist, um eine relativ positionierten Eltern-element, dann ist eine Regel aufgestellt und funktionales link. Das erste link ist ein absolut positioniert pseudo-element auf, es über die gesamte Karte. Alle sub-links werden relativ positioniert und kommen nach dem ersten link, so würden Sie sitzen oben auf den ersten link durch z-index.

Demo mit dem Autor-link.

Und apropos stapeln pseudos, dass der Ansatz Sean Curtis hier benutzt:

Finden Sie den Stift so tun, verschachtelte Verknüpfungen von Sean Curtis (@seancurtis) auf CodePen.

Andere Lösungen in der “crafty” Gebiet sein könnte:

  • Mit einem <form> – element das action-Attribut wirkt wie ein link.
  • Über ein <object> – element umschließen die innere Verknüpfung.

Sara Soueidan reagierten mit Ihren eigenen post!

Ich hatte die gleiche Anforderung ein paar Jahren, als ich baute, der front-end-Fundament für das Smashing Magazine. Also dachte ich, ich Schreibe meine Antwort zu Chris ‘ thread, in form von einem blog-post.

Sara hat geschrieben über dieses mit viel mehr detail und Sorgfalt als die, die ich hier habe, also auf jeden Fall prüfen, ob aus. Es sieht aus wie beide, Sie und Heydon gelandet sind, auf fast der gleichen Lösung mit dem pseudo-element Abdeckung enthält, die sub-links Stossen oben, wie gebraucht.

Haben Sie schon einmal getan, es anderen Weg? Viele UX-und a11y zu denken abbout!

SHARE
Previous articleNested Links
Next articleGeneste Links