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のダウンロードや詳細については以下からどうぞ。

関連記事

  1. Salvattore
  2. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

  3. Hamburger Icon Menu
  4. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

  5. JavaScript

    とても簡単にカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」

    とってもカッコいいタグクラウドを実装することができるjQueryプラグ…

  6. JavaScript

    ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「…

    なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuer…

コメント

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

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

最近の記事

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

アーカイブ

PAGE TOP