[JS]既存のナビゲーションを簡単にレスポンシブ対応のトグル型にするスクリプト -Naver

サイト構築 -JavaScript

Post on:2013年8月29日

Naverのデモ

デモではベーシックなものをはじめ、アニメーションを伴うものなどがあります。

デモは、Naverの下の方に

2番目のアニメーションを伴うデモを、アニメーションgifにしてみました。
まずは、デスクトップで表示した際のナビゲーションです。

デスクトップ時の表示

スマフォやタブレットなどの小さい画面になると、このナビゲーションがトグル型に変わります。

スマフォ時の表示

Naverの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。

<script src="jquery.min.js"></script>
<link rel="stylesheet" href="jquery.fs.naver.css" type="text/css" media="all" />
<script src="jquery.fs.naver.js"></script>

Step 2: HTML

HTMLはナビゲーションの要素を指定できるように実装します。
※ここでは、navで指定。

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</nav>

Step 3: JavaScript

jQueryのセレクタでナビゲーションを指定し、スクリプトを実行します。

$("nav").naver();

アニメーション付きにするには、下記のように記述します。

$("nav").naver({
    animated: true;
});

Step 4: CSS

ナビゲーションのデザインはスタイルシートで簡単にカスタマイズできます。

nav a { background: #254960; color: #fff; display: block; float: left; font-size: 16px; line-height: 40px; margin: 0 1px 0 0; padding: 0 20px; }
nav a:hover { background: #222; }

@media screen and (max-width: 740px) {
    nav a { float: none; margin: 0 0 1px 0; width: 100%; }
}