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. jQuery ui material design datepicker
  2. jQuery Section Navi Plugin
  3. no-image

    JavaScript

    サイドバーをフローティングできる「FloatSidebar.js」

    FloatSidebar.jsはサイドバーをフローティングできるVan…

  4. Scroll Indicator

    JavaScript

    シンプルなスクロールインジケーターを実装できる「Scroll Indicator」

    Scroll Indicatorは、スクロールによるアニメーションでコ…

  5. Skippr

    JavaScript

    軽くて速いスライドショーを実装できるjQueryプラグイン「Skippr」

    SkipprというjQueryプラグインを使えば、軽くて速いスライドシ…

  6. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

コメント

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

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

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP