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. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

  2. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

  3. JavaScript

    画像をボックス単位に分割してスライドさせていくjQueryプラグイン「Maskify Slider」…

    とてもお洒落なjQueryのイメージスライダーがあったのでご紹介します…

  4. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  5. Inspiration for Menu Hover Effects

コメント

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

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

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP