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. Slyder

    JavaScript

    レスポンシブ対応のスライダーナビゲーションを実装できる「Slyder」

    Slyderはレスポンシブに対応したスライダーナビゲーションを実装でき…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  3. Tip

    JavaScript

    シンプルなUIで使いやすいツールチップ実装「Tip」

    TipはシンプルなUIによる使いやすいツールチップを実装することができ…

  4. SimpleCalculadora

    JavaScript

    シンプルでカスタマイズもできる電卓「SimpleCalculadora」

    SimpleCalculadoraはシンプルでCSS、オプションなどで…

  5. jquery countDownTimer
  6. JavaScript

    レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」

    Responsive TextというjQueryプラグインを使えば、と…

コメント

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

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

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP