JavaScript

ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」

ホバーするとその地点を中心にして円形メニューが表示されるプラグイン「jQuery Wheel Menu」をご紹介します。ただ表示されるのではなく、中心から飛び出てくるようなアニメーションをしているので、メニューの出し入れが見ていておもしろいですね。以下は使い方です。

[ads_center]

使い方

このように、何も表示されていない状態から。

jQuery Wheel Menu

ホバーするとメニューが表示されます。

jQuery Wheel Menu

使い方は、head内にjQuery本体、jquery.wheelmenu.js、wheelmenu.cssを読み込んで、HTMLを以下のようにマークアップします。

<a href="#wheel" class="wheel-button">
    <span>+</span>
</a>
<ul id="wheel" class="wheel">
    <li class="item"><a href="#home">A</a></li>
    <li class="item"><a href="#home">B</a></li>
    <!-- 中略 -->
</ul>

あとはプラグインをセットするだけです。オプションではトリガー、アニメーション、スピード、アングルといった項目をカスタマイズすることができます。

$(".wheel-button").wheelmenu({
    trigger: "hover", // "click" or "hover"を設定。デフォルトは "click"
    animation: "fly", // "fade" or "fly"を設定。デフォルトは"fade"
    animationSpeed: "fast", // "instant", "fast", "medium", or "slow"を設定。デフォルトは"medium"
    angle: "all" // "all", "N", "NE", "E", "SE", "S", "SW", "W", "NW", or even array [0, 360]を設定。デフォルトは"all" or [0, 360]
});

jQuery Wheel Menuのダウンロードや詳細については以下からどうぞ。

Albumizeアルバムみたいな画像コレクションのギャラリーを管理・実装できるjQueryプラグイン「Albumize」前のページ

Kindleの最新情報(セールや新刊)が分かるiPhoneアプリ「新刊チェッカー for Kindle」次のページ新刊チェッカー for Kindle

関連記事

  1. no-image

    JavaScript

    フロントエンドアプリケーションを構築するためのJSライブラリ「HyperApp」

    HyperAppは、フロントエンドアプリケーションを構築するための1K…

  2. Horizon Swiper

    JavaScript

    スワイプやスクロール対応の軽量なjQueryプラグイン「Horizon Swiper」

    Horizon Swiperはスワイプやブラウザスクロールに対応したj…

  3. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  4. Parallax Slider with jQuery
  5. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

  6. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

コメント

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

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

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP