CodePen / General

Thought excercise: "nested" links.

Thought excercise: "nested" links.

CodePen / General · 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?
Load previous messages

August 31, 2018 at 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>

  • reply
  • like

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>

  • reply
  • like

would you also have to stop event propogation? 🤔

  • reply
  • like

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.

  • reply
  • like

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

like-fill
2
  • reply
  • like

August 31, 2018 at 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

  • reply
  • like

August 31, 2018 at 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

  • reply
  • like

August 31, 2018 at 11:11pm

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

  • reply
  • like

September 7, 2018 at 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

  • reply
  • like

(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/)

  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```