JavaScript

立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

立体的なナビゲーション表示を実装できるjQueryプラグイン「Box Lid」が面白かったので備忘録。実際のデモでは左のナビゲーションアイコンにマウスオーバーするとメニューが立体的に表示されます。カーソルを離すとメニューは非表示になるのでコンテンツに集中させることができますね。

[ads_center]

使い方

Box Lid

このように左側のアイコンにマウスを乗せると。

Box Lid

こんな感じでナビゲーションメニューが表示されます。動きがおもしろいですね。以下、使い方です。

ダウンロードしたプラグインの読み込み。

<link rel='stylesheet' type='text/css' href='css/box-lid.css'>
<script src='js/box-lid.js'></script>

マークアップ。

<div class='box-lid-menu'>
    <div class='box-lid-icon'></div>
    <nav>
        <!-- ナビゲーション -->
    </nav>
</div>
<div class='box-lid'>
    <div class='box-lid-content'>
        <!-- コンテンツ -->
    </div>
</div>

プラグインをセット。

$(function() {
    $('.box-lid-menu').boxLid();
});

人とは違ったナビゲーションを実装したい時に覚えておきたいですね。

関連記事

  1. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

  2. jQuery liMarquee
  3. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  4. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  5. Picker

    JavaScript

    iOSのようなピッカーを実装できるJSライブラリ「Picker」

    Pickerは、iOSのUIのようなピッカーを実装することができるJS…

  6. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン12選のまとめ 2012/08 – 2012/0…

    2012年8月〜2012月9月までの当ブログで紹介したjQueryプラ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP