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

    JavaScript

    あらかじめ設定したリストなどから複数タグを選択できる「Tokenize2」

    Tokenize2は、あらかじめ設定したリストやAjaxから複数のタグ…

  2. JavaScript

    シンプルで軽量のレスポンシブなjQueryスライダー「ResponsiveSlides.js」を使っ…

    とてもシンプルで使いやすそうなレスポンシブのjQueryスライダー「R…

  3. Flex-box Gallery

    JavaScript

    ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

    Flex-box Galleryは、ランダムサイズによる画像たちをかっ…

  4. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  5. MenuSpy

    JavaScript

    セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

    MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリ…

  6. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP