ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「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>

デモ

  • このエントリーをはてなブックマークに追加

関連記事

no image

定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」

PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

Wysiwygエディタ用プラグイン「CKEditor」

「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表

ページの画像を非同期で読み込んでくれる「Lazy Load」

「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide

no image

クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑