JavaScript

ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」

覚えておくと便利そうだったのでメモがてらエントリーします。リスト化したナビゲーションを画面のサイズによって最適化してくれるjQueryプラグイン「HorizontalNav」です。これをセットするだけでナビゲーションがレスポンシブデザインになります。お手軽でいいですね。以下使い方です。

[ads_center]

使い方

jQueryとHorizontalNavを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.horizontalNav.js"></script>

最適化したいナビゲーションをセレクタにセットします。

<script type='text/javascript'>
$(document).ready(function() {
    $('.full-width').horizontalNav();
});
</script>

HTMLでナビゲーションを記述します。

<nav class="horizontal-nav full-width">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Sitemap</a></li>
    </ul>
</nav>

あとはCSSで好きなようにナビゲーションの見栄えを整えればOKです。以下はHorizontalNavのサイトで使用されているデモのCSSです。

.horizontal-nav {
    background: #efefef;
    border-radius: 6px;
}
.horizontal-nav ul {
    background: #128F9A;
    float: left;
    text-align: center;
    border-radius: 6px;
    border: 1px solid #0e7079;
}
.horizontal-nav ul li {
    float: left;
    border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
    border-left: 0 none;
}
.horizontal-nav ul li a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    border-top: 1px solid rgba(255,255,255, 0.25);
    border-left: 1px solid rgba(255,255,255, 0.25);
}
.horizontal-nav ul li:first-child a {
    border-left: 0 none;
}
.horizontal-nav ul li a:hover {
    background: #12808a;
}
.horizontal-nav ul li:first-child a {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

ということで、以下からダウンロード&デモも確認できます。

関連記事

  1. 3D Portfolio Template

    JavaScript

    立体的に回転するテンプレート「3D Portfolio Template」

    滑らかに、立体的に回転するテンプレートを実装することができる「3D P…

  2. jBox

    JavaScript

    ツールチップやモーダルウィンドウなどを実装できるjQueryプラグイン「jBox」

    jBoxはカスタマイズ性に優れたツールチップ、モーダルウィンドウ、通知…

  3. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

  4. no-image

    JavaScript

    シンプル・軽量なアナログ時計を実装できる「jsRapClock」

    jsRapClockはシンプルで軽量なアナログ時計を実装できるjQue…

  5. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

  6. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

コメント

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

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

最近の記事

  1. フレンチトーストや自家製ソーセージ
  2. ハレイワ スムージー
  3. クローバーで淹れたコーヒー
  4. 雪が降る日本海

アーカイブ

PAGE TOP