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();
});

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

Adobe Creative Cloud Cleaner ToolAdobeのCreative Cloudでインストールトラブルが起きた時は「CS Cleaner Tool」が便利前のページ

映画「インセプション」を観たのでレビュー次のページ映画レビュー

関連記事

  1. Recursive Hover Nav
  2. FakeLoader.js

    JavaScript

    フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js

    FakeLoader.jsはフルスクリーンでカッコいいローディングアニ…

  3. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

  4. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

  5. Sticky Elements

    JavaScript

    エレメントがくっついてくるアニメーション「Sticky Elements」

    Sticky Elementsはエレメントにカーソルを乗せるとくっつい…

  6. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

コメント

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

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

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP