Nesting Links

A JavaScript solution for nested links

Nested Links

Nested links are illegal.

Meaning, you can’t have a link sitting inside a block level link. And of course, this makes sense. But, if you’re a fan of block level links, like myself, then you’ve certainly experienced times when you’ve wanted to nest a link.

For example, say you have a blog / content site with a post pattern that features an article link wrapping all the content – image, title, excerpt, etc.

But then, inside that block level link, you’d like to also include the post’s taxonomy, with a link to its archive. No go.

You’d have to either link each item separately (weak), or open, close, and then open the post link again (equally weak).

I’ve run into this issue on several projects in recent memory, especially with our project for Redfin’s Real-Time Blog. So, here’s a little JavaScript-based solution I cooked up.

Data Atts

Essentially, you add your taxonomy (or whatever) in a heading or span tag, and then attach the data attribute [data-nested-link=''] with the taxonomy’s archive link as the value (or whatever). A click event takes that value and builds a ‘link’ on the fly via window.open / window.location.assign

Vanilla JS Version


/**
 * Nested Links
 * Allows for links nested inside a block level link wrap
 * via a data attribute of the link location.
 */
var NestedLinks = (function() {

  var nestedLinks = document.querySelectorAll('[data-nested-link]');

  return{
     
    /**
     * Init
     */
    init: function(){
      this.buildLink();
    },
 
    /**
     * Build Link
     * Constructs our nested link from our data attribute
     */
    buildLink: function(){
     
      Array.from(nestedLinks).forEach(function (nestedLink) {
        
        nestedLink.addEventListener('click', function (e) {
          var fakieLink = this.dataset.nestedLink;
          fakieLink && (e.preventDefault(),
          e.stopPropagation(), 
          window.open && e.metaKey ? window.open(fakieLink) : window.location.assign(fakieLink)
            );
        });
      });
    },
  };
 })();
NestedLinks.init();

Jquery Version (yikes!)


/** 
 * Simulated Links
 * Enables nested category archive links to still be clickable
 */
 /*jshint -W030*/

(function($) {
  var nestedLinks = { 

    buildLink: function() {
      $("[data-nested-link]").on("click", function(e) {
        var $this, $nestedLink;
        $this = $(this), 
        $nestedLink = $this.data("nested-link"), 
        $nestedLink && (e.preventDefault(),
          e.stopPropagation(), 
          window.open && e.metaKey ?
          window.open($nestedLink, "_blank") : 
          window.location.assign($nestedLink)
        );
      });
    },
  };
  nestedLinks.init();
})(jQuery);

Useage


<article class="card">
  <a class="card__link" href="http://yourmom.com/post-link">
    <figure class="card__figure">
      <img src="https://source.unsplash.com/HzEb3ZRtV88/900x600"/>
    </figure>
    <div class="card__content">
    <!-- Our data att nested link builder -->
      <span class="card__meta" data-nested-link="http://yourmom.com/tax-archive">Nested Cat Link</span>
      <h3 class="card__title">Girls ain't nothing but trouble</h3>
      <p class="card__text">Listen homeboys don't mean to bust your bubble, but girls of the world ain't nothing but trouble.</p>
      <span class="card__btn">Read More</span>
    </div>
 </a>
</article>  

Note that card__meta includes data-nested-link="http://yourmom.com/tax-archive"

Now just style that taxonomy element like you would any ole link, and you’re golden.

Demo

See the Pen Nested Links.JS by Stephen Scaff (@StephenScaff) on CodePen.

Github

Of course, you can snag Nested Links on Github as either Vanilla JS or Jquery (yikes again).

Nested Links on Github

For UI e-mail awesomeness