Hover dropdown with dropdown content outside of target element

_README.md

This is a method of displaying dropdowns via javascript when the content to be revealed is not contained within the element triggering the reveal as in your typical dropdown situation. This method uses the jQuery doTimeout() plugin to handle the hiding and showing on hover of the trigger element in order to help cancel the close event when the mouse is over the revealed content. It also handles throttling and hoverintent.

Codepen Example: https://codepen.io/anon/pen/LGPgxN

dropdown.css

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #aaa;
  
  li {
    display: inline-block;
  }
  
  a {
    display: inline-block;
    padding: 1em;
  }
}

.drawers {
  position: relative;
  
  .drawer {
    position: absolute;
    display: none;
    background: #f00;
    width: 100%;
    
    h2 {
      margin-top: 0;
    }
  }
}

dropdown.html

<ul class="menu">
  <li><a href="#" data-drawer="drawer1">Link 1</a></li>
  <li><a href="#" data-drawer="drawer2">Link 2</a></li>
  <li><a href="#" data-drawer="drawer3">Link 3</a></li>
  <li><a href="#" data-drawer="drawer4">Link 4</a></li>
</ul>

<div class="drawers">
  <div class="drawer" id="drawer1">
    <h2>Drawer 1</h2>
    <p>
      <img src="http://www.placecage.com/300/200">
    </p>
  </div>
  
  <div class="drawer" id="drawer2">
    <h2>Drawer 2</h2>
    <p>
      <img src="http://www.placecage.com/301/200">
    </p>
  </div>
  
  <div class="drawer" id="drawer3">
    <h2>Drawer 3</h2>
    <p>
      <img src="http://www.placecage.com/302/200">
    </p>
  </div>
  
  <div class="drawer" id="drawer4">
    <h2>Drawer 4</h2>
    <p>
      <img src="http://www.placecage.com/303/200">
    </p>
  </div>
</div>

dropdown.js

/*
 * jQuery doTimeout: Like setTimeout, but better! - v1.0 - 3/3/2010
 * http://benalman.com/projects/jquery-dotimeout-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */
(function($){var a={},c="doTimeout",d=Array.prototype.slice;$[c]=function(){return b.apply(window,[0].concat(d.call(arguments)))};$.fn[c]=function(){var f=d.call(arguments),e=b.apply(this,[c+f[0]].concat(f));return typeof f[0]==="number"||typeof f[1]==="number"?this:e};function b(l){var m=this,h,k={},g=l?$.fn:$,n=arguments,i=4,f=n[1],j=n[2],p=n[3];if(typeof f!=="string"){i--;f=l=0;j=n[1];p=n[2]}if(l){h=m.eq(0);h.data(l,k=h.data(l)||{})}else{if(f){k=a[f]||(a[f]={})}}k.id&&clearTimeout(k.id);delete k.id;function e(){if(l){h.removeData(l)}else{if(f){delete a[f]}}}function o(){k.id=setTimeout(function(){k.fn()},j)}if(p){k.fn=function(q){if(typeof p==="string"){p=g[p]}p.apply(m,d.call(n,i))===true&&!q?o():e()};o()}else{if(k.fn){j===undefined?e():k.fn(j===false);return true}else{e()}}}})(jQuery);


$(document).ready(function() {
  var $links = $('.menu a'),
      $drawers = $('.drawer');

  $links.each(function (){
    var $link = $(this),
        $drawer = $drawers.filter('#' + $link.data('drawer')),
        $both = $(this).add($drawer);

    $both.hover(function () {
      $both.doTimeout( 'hover', 200, function() {
        $drawer.fadeIn(100);
      });
    
    }, function () {
      $both.doTimeout( 'hover', 200, function() {
        $drawer.fadeOut(100);
      });
    });
  });
});