読者です 読者をやめる 読者になる 読者になる

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

Node.js babel rollup.js JavaScript

ドロップダウンメニュー用のライブラリ 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 の紹介でした。

wsltty が起動しない(すぐ落ちる)件

Bash on Ubuntu on Windows windows

Bash on Ubuntu on Windows 向けのターミナル wsltty が mintty から出ています。 さっそくこれを使おうとしたところ、起動するとウィンドウが表示された後すぐ終了するという現象に見舞われました。

github.com

原因

原因はウイルスバスター クラウドでした。

以下のサイトを参考に、wslbridge を自分でビルドし、msys2 の mintty を用いた場合でも同様にすぐ終了してしまったのでもしやと思い、wsltty のフォルダをウイルスバスターの例外設定に追加したところ起動するようになりました。

mattn.kaoriya.net

対応

wsltty は C:\Users\[ユーザ名]\Appdata\Local\wsltty 以下にインストールされたので、このフォルダをウイルスバスターの例外設定に追加します。

環境