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

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

  2. SpriteSpin

    JavaScript

    タッチにも対応した360度ビューを実装できるjQueryプラグイン「SpriteSpin」

    SpriteSpinはプロダクトページなどで役立つ、360度ビューを実…

  3. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  4. Nivo Lightbox

    JavaScript

    Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

    シンプルでレスポンシブにも対応しているLightbox系のjQuery…

  5. basicContext

    JavaScript

    使いやすいコンテキストメニューを実装できる「basicContext」

    basicContextはシンプルで使いやすいコンテキストメニューを実…

  6. jQuery.GI.TheWall.js

コメント

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

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

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP