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;
}

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

薄くて軽い!外付けHDD「カクうす9 – 500GB HDPX-UT500S」レビュー(フォーマット〜データ移行)前のページ

CSSで簡単に三角形を作ってくれるChrome拡張機能「CSS三角形作成ツール」次のページ

関連記事

  1. jQuery Floating Social Share
  2. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  3. zelect

    JavaScript

    セレクトボックスをカスタマイズして使いやすくしてくれる「zelect」

    zelectはセレクトボックスをユーザーが使いやすくなるようにカスタマ…

  4. Basic Metro Dynamic jQuery Tab Menu
  5. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  6. Tabslet

    JavaScript

    jQueryプラグインでタブ機能が実装できる「Tabslet」

    TabsletというjQueryプラグインを使えばWebサイトにタブ機…

コメント

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

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

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP