Thought excercise: "nested" links.
August 31, 2018 at 3:45pmThe 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:45pmSay 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
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>
Here's a working example. Though, I agree with others on this thread that it's confusing UX… https://codepen.io/nathansmith/pen/vzgvwQ
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
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
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 's version: https://codepen.io/cbirdsong/pen/ZMaLPK
(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/)