JavaScript

スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadShrinker」

スクロールするとナビゲーションが上部に固定配置されるjQueryプラグイン「HeadShrinker」を使ってみました。レスポンシブにも対応しており、ブラウザの横幅を小さくするとメニューアイコンに切り替わる仕組みになっています。使い方もシンプルなので、あっという間に今風のナビゲーションを実装することができます。以下は使い方です。

[ads_center]

使い方

このようにスクロールすることでナビゲーションが上部に固定されます。

HeadShrinker

ブラウザ幅を縮小していくと、こんな感じでナビゲーションメニューがアイコンに切り替わります。レスポンシブのサイトでよく見かけますよね。

HeadShrinker

使い方はとても簡単です。jQuery本体とダウンロードしたプラグインファイルをhead内に読み込みます。

<link rel="stylesheet" href="headshrinker.css" media="all" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="jquery.headshrinker.js"></script> 

で、あとはHeadShrinkerをセットするだけです。

<script>
jQuery(document).ready(function() {
    jQuery('header').headshrinker();
});
</script>

ちなみにマークアップの例としてはこんな感じ。メニューを横並びにしたりといった基本的なデザインに関しては各自CSSで作り込む必要があります。

<header>
    <nav>
        <ul>
            <li><a href="#">メニュー1</a></li>
            <li><a href="#">メニュー2</a></li>
            <li><a href="#">メニュー3</a></li>
            <li><a href="#">メニュー4</a></li>
        </ul>
    </nav>
</header>

オプションも用意されているので気になる方は是非チェックしてみて下さい。

jQuery googleslidesGoogle+やPicasaから写真を埋め込みスライドショーを作れるプラグイン「jQuery googleslides」前のページ

WordTwitの設定方法や日本語化してからの使い方について次のページWordTwit

関連記事

  1. no-image
  2. Wipe Slider

    JavaScript

    背景画像を滑らかにスライドさせるjQueryプラグイン「Wipe Slider」

    Wipe Sliderは背景画像を滑らかにスライドさせることができるj…

  3. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

  4. mgGlitch

    JavaScript

    グリッチ効果を付けれるjQueryプラグイン「mgGlitch」

    mgGlitchは、CSS3の変換を利用して指定した要素にアニメーショ…

  5. simpleDialog

    JavaScript

    レスポンシブ対応のシンプルなポップアップ・ダイアログを実装できる「simpleDialog」

    simpleDialogはレスポンシブに対応したポップアップ・ダイアロ…

  6. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. WiMAX
  2. 甘柿
  3. 冬用のふとん
PAGE TOP