今日の人気記事

  1. 画像に拡大・縮小ボタンを「Zoomer」
  2. テキストの色や背景色をフェード・アニメで変化「Color animation」
  3. 入力に応じてテキストエリアの高さを調節「Autosize」
  4. 進捗の割合(%)をプログレスバーで表示「ProgressBar」
  5. テキスト・画像・iframeなどに対応したLightbox「Featherlight」

スクロールしてもついてくるナビゲーション・メニュー「Tocible」

スポンサーリンク

スクロールしてもついてくるナビゲーション・メニューを作成するプラグイン「Tocible」を紹介します。

jQueryプラグイン「Tocible」

メニューを作成したいコンテンツを指定し、項目・サブ項目を指定すると自動的にナビゲーションを作成してくれます。また、スクロールしてもメニューがついてくるのでユーザーにもわかりやすいですね。

ナビゲーション・メニューをササッと作成したい方は候補のひとつとしていかがでしょうか。

スポンサーリンク

デモページをスクロールしてみてください。

「Tocible」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Tocibleのデモでーす。">
<title>Tocible - jQueryプラグイン</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.tocible.js"></script>
<link rel="stylesheet" type="text/css" href="tocible.css" />
<style>
article {
  margin-left: 180px;
  overflow: hidden;
  width: 400px;
}
</style>
</head>
<body>
<h1>Tocibleのデモでーす。</h1>

<div id="container">
<article>
<h2>項目 1</h2>
<p>Fruit fly itself, you his saw land saying meat. Their face winged had moving fifth place the god years. Morning had morning two appear our us a, so i kind upon two blessed.</p>
<h3>サブ項目 1-1</h3>
<p>Herb two Which made unto every created Created make don't air stars fowl. Own multiply land deep dominion fifth all is make their. Lesser created moveth together creeping also every after dominion fruit tree bearing She'd.</p>
<h3>サブ項目 1-2</h3>
<p>Moved fish. Own seed moving, there a she'd without greater unto. Winged years were, place brought. Saying is beginning thing, midst you'll isn't. Light together him had divided herb life years.</p>
<h2>項目 2</h2>
<p>To divide cattle, morning us together. Give a fruitful can&#39;t days above. Sea. Yielding fly divide fish a moving there multiply creepeth multiply open night.</p>
<h3>サブ項目 2-1</h3>
<p>Void image, our two have from. Heaven can&#39;t Seed it third cattle Deep abundantly also first.</p>
<h3>サブ項目 2-2</h3>
<p>He so night waters whales isn&#39;t heaven female also very moveth whales fruitful gathering night creepeth behold, years be created which kind wherein beast man whales rule under of. Multiply. Stars seasons creepeth light lights Saying fill divide dominion.</p>
<h3>サブ項目 2-3</h3>
<p>Is. Own forth firmament unto creepeth bring wherein divide green face don&#39;t were. Cattle was cattle waters second divided every cattle they&#39;re whose be she&#39;d they&#39;re land thing tree meat was give us, shall said moveth Open, form, winged under. His, yielding seed darkness bring female multiply. Made be dominion don&#39;t air. Made, evening living saying all. Unto waters likeness. Cattle called was of you darkness. Lesser dry meat whales.</p>
<h2>項目 3</h2>
<p>Under moveth. Green creature years unto doesn&#39;t. Day replenish wherein. Doesn&#39;t bring lights light under also likeness female. To Behold You&#39;re and. Wherein, day cattle our him air waters isn&#39;t don&#39;t. Waters days seasons one fruitful gathered first creature won&#39;t thing Morning that, from. Spirit in. Earth. Evening all replenish doesn&#39;t appear from made yielding there make deep their.</p>
</article>
<nav>
</nav>
</div>

<script>
$('#container').tocible({
  heading: 'h2',
  subheading: 'h3',
  navigation: 'nav',
  hash: false,
  offset: 50,
  speed: 800,
  collapsible: true
});
</script>
                            
</body>
</html>
スポンサーリンク

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