JavaScript

アイコンをクリックすると周りにメニューが表示されるjQueryプラグイン「FerroMenu」

FerroMenuというjQueryプラグインを使えばアイコンをクリックすることで周りにメニューを表示させることができます。アイコンはドラッグして移動させることもできるのでとても便利です。スペースの有効活用にもなるし見た目もシンプルでよさそうですね。以下は使い方です。

[ads_center]

FerroMenuの使い方

左側中央にあるアイコンをクリックするとメニューが表示されます。

FerroMenu

こんな感じでアイコンの周りにメニューが出てきます。

FerroMenu

使い方は、まずhead内にjQueryとプラグインを読み込みます。

<link rel="stylesheet" href="jquery.ferro.ferroMenu.css" type="text/css">
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery.ferro.ferroMenu-1.0.min.js" type="text/javascript"></script>

続いてメニューをHTMLでマークアップしていきます。

<ul id="nav">
    <li><a href="リンクパス">メニュー1</a></li>
    <li><a href="リンクパス">メニュー2</a></li>
    <li><a href="リンクパス">メニュー3</a></li>
    <!-- 中略 -->
</ul>

あとはプラグインをセットするだけです。

$(document).ready(function() {
    $('#nav').ferroMenu();
});

オプションもいくつか用意されています。シンプルですが、個人的にはとても使いやすいメニューだと感じました。

simplePagination.jsシンプルなページネーションを実装できるjQueryプラグイン「simplePagination.js」前のページ

iTunesで曲が変更された時に画面右上に出る通知を非表示にするやり方次のページ

関連記事

  1. Animated Page Transition
  2. PopSelect

    JavaScript

    タグ形式のセレクトボックスをポップオーバーで表示させる「PopSelect」

    PopSelectはタグ付けするような感覚のセレクトボックスをポップオ…

  3. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

  4. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  5. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  6. EndlessRiver

    JavaScript

    エンドレスに流れていくコンテンツスライダー「EndlessRiver」

    EndlessRiverはエンドレスに流れていくコンテンツスライダーを…

コメント

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

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

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP