今日の人気記事

  1. フォームの内容をJSON形式で取得「JSON Form」
  2. Tableカラム(列)にソート機能を追加「Tablesorter」
  3. スクロールしてもついてくる「Sticky」
  4. ページ内リンクをゆっくりスクロール「Smooth Scroll」
  5. 手でめくってるかのような動きの画像ギャラリー「HeapShot」

画面の端についてくるメニューを設置「mb.extruder」

スポンサーリンク

画面の端についてくるメニューを設置するプラグイン「mb.extruder」を紹介します。

jQueryプラグイン「mb.extruder」

このプラグインを使えば、画面の端の上下左右についてくるメニューを設置することができます。

タブのようなメニューをクリックするとパネルが表示されます。

オプションではメニューの位置、パネルの幅などさまざまな項目を設定することができます。

スポンサーリンク

それではデモページをご覧ください。

「mb.extruder」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="mb.extruder のデモでーす。">
<title>mb.extruder - jQueryプラグイン</title>
<link href="css/mbExtruder.css" media="all" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/jquery.hoverIntent.min.js"></script>
<script src="js/jquery.mb.flipText.js"></script>
<script src="js/mbExtruder.js"></script>
<script>
$(function(){
  $("#demo-left").buildMbExtruder({
    position:"left",
    width:300,
    extruderOpacity:.8,
    hidePanelsOnClose:false,
    accordionPanels:false,
    onExtOpen:function(){},
    onExtContentLoad:function(){$("#demo-left").openPanel();},
    onExtClose:function(){}
  });
});
</script>
</head>
<body>
<div style="text-align:center;">
  <h1>mb.extruder のデモでーす。</h1>
  <p>ページをスクロールしてみてください。</p>
</div>
<div style="height: 3000px;">
  <div id="demo-left" class="a {title:'左のメニュー'}">あいてむ</div>
</div>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)