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. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

  2. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  3. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  4. BigText

    JavaScript

    テキストを指定した幅にフィットさせるjQueryプラグイン「BigText」

    BigTextは、テキストの行を、指定した幅にフィットさせるために必要…

  5. Parazoom

    JavaScript

    クールに拡大・チルトする画像ズーム「Parazoom」

    Parazoomはクールに拡大・チルトする画像ズーム機能を実装できるj…

  6. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

コメント

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

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

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP