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>

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

関連記事

  1. pull-to-reload

    JavaScript

    下へ引いてページをリフレッシュ(リロード)できる「pull-to-reload」

    pull-to-reloadは、Webページ内で下へ引くだけでページを…

  2. jquery-steps

    JavaScript

    ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」

    jquery-stepsは、ステップ式のウィザードを実装することができ…

  3. jQuery Navobile
  4. jQuery Social Share Bar
  5. Multi-Level Menu

    JavaScript

    流れるような遅延アニメーションが美しい階層化メニュー実装「Multi-Level Menu」

    Multi-Level Menuは流れるような遅延アニメーションが美し…

  6. flexible-bootstrap-carousel

コメント

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

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP