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

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし

jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ

no image

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

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

テキストに動きをつけるプラグイン

テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit

数値入力スライダー「jQuery Simple Slider」

「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余

レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

no image

色々なタイプの画像ギャラリーが実装できる「Rondell」

「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ

実装方法が選べるツールチップ用プラグイン「Smallipop」

Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします

no image

シンプルにポップアップを実装できる「PopBox」

「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!

Comment

Message

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP ↑