ドロップダウンメニュー用のライブラリ smart-dropdown-menu を作った

ドロップダウンメニュー用のライブラリ smart-dropdown-menu を作成しました。

github.com

smart-dropdown-menu は、<script> タグでの読み込みと npm での管理の両方に対応しています。 どのように両対応したかの詳細については、以下の Qiita 記事を御覧ください。

qiita.com

smart-dropdown-menu

smart-dropdown-menu は以下の gif のように、サブメニューへの移動時にマウスカーソルの斜め移動を考慮したホバー判定を行う機能を持ったドロップダウンメニューを作成します(解説のため色がついています)。

smart-dropdown-menu demo

同様の機能を持つライブラリに jQuery-menu-aim がありますが、smart-dropdown-menu は mousemove イベントを用いずにホバー判定を行っている点が特徴です。

smart-dropdown-menu は以下のような html を記述することで生成します。

<nav class="smart-dropdown-menu">
  <div class="smart-dropdown-menu-button">
    <span></span>
  </div>
  <ul class="sdm-list">
    <li>
      <a href="#">menu01</a>
      <ul class="sdm-list">
        <li><a href="#">submenu1_1</a></li>
        <li><a href="#">submenu1_2</a></li>
        <li><a href="#">submenu1_3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">menu02</a>
      <ul class="sdm-list">
        <li><a href="#">submenu2_1</a></li>
        <li><a href="#">submenu2_2</a></li>
        <li><a href="#">submenu2_3</a></li>
      </ul>
    </li>
  </ul>
</nav>

ホバー判定の仕組み

先程の gif で表示されていた部分は、三角形の上半分をサブメニューの li:before で生成し、下半分を li:after で生成しています。
li:before, li:after の疑似要素にマウスカーソルが乗った場合、<li> タグの hover となるため、斜め移動用の判定領域として利用できる仕組みとなっています。

三角形の作り方

DOM 要素は通常 width と height をもとに四角形の領域が確保されます。 smart-dropdown-menu は skewX を用いて DOM 要素を平行四辺形に変形しています。

li:before {
  transform: skewX(-31deg);
}
li:after {
  transform: skewX(14deg);
}

メニューの初期化時にサブメニューの高さをもとに li:before 用の仰角li:after 用の俯角を計算し、skewX による変形で作成した2つの平行四辺形を組み合わせることで、以下のように三角形のホバー判定領域を生成しています。

f:id:yami_beta:20161126021903g:plain

まとめ

li:before, li:after を skewX で変形することで、mousemove を用いずにカーソルの斜め移動を考慮したホバー判定を実現したライブラリ smart-dropdown-menu の紹介でした。