ドロップダウンメニュー用のライブラリ smart-dropdown-menu を作った
ドロップダウンメニュー用のライブラリ smart-dropdown-menu を作成しました。
smart-dropdown-menu は、<script>
タグでの読み込みと npm での管理の両方に対応しています。
どのように両対応したかの詳細については、以下の Qiita 記事を御覧ください。
smart-dropdown-menu
smart-dropdown-menu は以下の gif のように、サブメニューへの移動時にマウスカーソルの斜め移動を考慮したホバー判定を行う機能を持ったドロップダウンメニューを作成します(解説のため色がついています)。
同様の機能を持つライブラリに 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つの平行四辺形を組み合わせることで、以下のように三角形のホバー判定領域を生成しています。
まとめ
li:before
, li:after
を skewX で変形することで、mousemove を用いずにカーソルの斜め移動を考慮したホバー判定を実現したライブラリ smart-dropdown-menu の紹介でした。