[JS]ずっーとホバーしていたい、階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション -Stairway Navigation

ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。
一応プラグインですが、エフェクトの要はCSS3です。

Stairway Navigation (A jQuery Plugin?)

• デモ
• 実装

デモ

デモページ

デモは4種類あり、それぞれホバーに反応する階段の数が異なります。

階段の反応する数が一つと二つ

階段の反応する数が三つと四つ

実装

HTML

HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。

<div>
  <h2>One Step</h2> 
  <nav id="example-one">
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
  </nav>  
</div>

CSS

CSSのポイントは隣接セレクタを使用することです。これを利用して複数のアイテムにスタイルを定義できます。

a:hover { /* top stair stuff */ }

a:hover-1,
a:hover+1 { /* second stair stuff *}

a:hover-2,
a:hover-2 { /* third stair stuff *}

実装に使用するスタイルシートはデモページを参照ください。

JavaScript

ナビゲーションの実装にjQueryを使用していますが、階段のエフェクトはスクリプトに依存していません。
一つだけプラグインのオプションとして、階段の数をセットすることができます。

$(".main-nav").stairwayNav({
  stairs: 2
});

実装に使用するスクリプトはデモページを参照ください。