The CodePen community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Thought excercise: "nested" links.

August 31, 2018 at 3:45pm

Say you have a BIG link. A whole area that you can click to go somewhere. But within that area is another link that goes somewhere different.

What are your option there? How might you do it?

August 31, 2018 at 3:59pm

Nathan Smith@nathansmith

3:59pm

Two absolutely positioned links, inside a position: relative parent, with generous padding-bottom on the first link, with the second link "pinned" in front via bottom:0 (or whatever offset).

Eric Ritchey@eritchey

3:59pm

inner link with `position: relative;z-index: 1;`?

Giulia Alfonsi@electric-g

4:25pm

I wrap the "different link" inside an <object> tag, so you have

<a class="big-link" href="big.html">I'm a big link <object><a class="small-link" href="diff.html">I'm an inside different link</a></object></a>

PixelsPencil@pixelspencil

4:27pm

this is a regular requirement where I work and I normally position things and use z-index.

Say we have an image background on a div with a I would set the div with the background to have a placeholder blank image inside the markup and style so the background image covers it and wrap the img element inside an a tag with a z-index of 0 then inside the same div have another text link and position that and give a z-index of 1...

The below is a quicky so might have issues...

<style>
  body {
    position: relative;
  }
  div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: url(http: //placehold.it/600x600&text=background-image-600px-square) no-repeat;
      background-size: contain;
  }
  div:first-of-type img {
    height: 100%;
    width: 100%;
  }
  div a:last-of-type {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<div>
  <a href="background-link">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII="
      alt="alt here">
  </a>
  <a href="text-link">Text link</a>
</div>

Sid@sid

4:29pm

would you also have to stop event propogation? 🤔

Liam Egan@shubniggurath

4:46pm

Structurally, one link shouldn't live inside another (from a markup perspective). I'd have a container with the two links in and and just position them accordingly. This pattern is something of a regular occurrence in our projects.

Niki Brown@nikibrown

5:05pm

This is confusing from a UX perspective IMO - making a big area clickable vs jsut the text. Nothing visually indicates clickability.

Nathan Smith@nathansmith

6:26pm

Here's a working example. Though, I agree with others on this thread that it's confusing UX… https://codepen.io/nathansmith/pen/vzgvwQ

Richard van der Meer@richard-van-der-meer

9:17pm

I would create an absolute positioned link (z-index 1) that covers the whole container (big link) and a regular link (z-index 2). It could make sense from a UX perspective, for example a product catalog with two buttons: Show details and Add to cart, and the complete container also linking to Show details

Sean Curtis@sean-curtis

11:11pm

I made a smaller example, 1st link goes to codepen, 2nd to Twitter. https://codepen.io/seancurtis/pen/yxgdeE?editors=0100

September 7, 2018 at 2:33pm

Cory Birdsong@cbirdsong

2:33pm

I definitely agree this is an inherently bad idea, but if I had to do it I'd add some unclickable space around the nested link to help with slightly inaccurate clicks/taps. A hasty example built starting from

@nathansmith

's version: https://codepen.io/cbirdsong/pen/ZMaLPK

2:37pm

(oops, sorry for accidentally bumping this apparently very old thread, I just found my way here for the first time following a link here: https://www.sarasoueidan.com/blog/nested-links/)