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();
});

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

関連記事

  1. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  2. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  3. A simple jQuery Accordion with unlimited nesting

    JavaScript

    シンプルなアコーディオンを実装する「A simple jQuery Accordion with u…

    シンプルで見やすいアコーディオンを実装することができる「A simpl…

  4. no-image

    JavaScript

    シンプルなイメージスライダーとカルーセルを実装できる「SkySlider」

    SkySliderはシンプルで軽量、そしてレスポンシブにも対応したイメ…

  5. jQuery LoadingOverlay

    JavaScript

    多彩なローディング画面を実装できる「jQuery LoadingOverlay」

    jQuery LoadingOverlayは、カスタマイズ性に優れた多…

  6. no-image

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

コメント

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

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

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP