ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」

「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。

スクリプト

<script src="jquery.min.js" type="text/javascript"></script>
<script src="tinynav.min.js" type="text/javascript"></script>

実装

スタイルシートでブレイクポイントを設定します。
.tinynav(ドロップボックス)をdisplay:noneしておき、600px以下になると#nav(ナビゲーション)をdisplay: noneにします。
数値は、それぞれ用途に合わせて変更して下さい。

<style>
/* デスクトップ用 */
.tinynav { display: none }

/* モバイル用 */
@media screen and (max-width: 600px) {
    .tinynav { display: block }
    #nav { display: none }
}
</style>

<ul id="nav">
    <li class="selected"><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

<script>
$(function () {
    $("#nav").tinyNav({
        active: 'selected',   // 規定値をセットするclass
        header: 'Navigation', // ドロップダウンのヘッダー
        label: ''             // ドロップダウン用ラベル
    });
});
</script>

デモ

: 画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」

「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。ダウンロード | デモ

: バリデーションプラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

: ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン

画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。サムネ

: 入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。実装 fu

: タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。デフォルトでは、768