シンクグラフィカ札幌

ResponsiveNav.js

ResponsiveNav.js

シンプルなレスポンシブWebデザインに対応したスライダーメニュー。指定クラス名のnav要素内のアンカーをまとめて、スライドメニューを自動生成・追加するためのJavascriptです。jqueryは使ってません。

作ってから思ったけどjqueryのtoggle使ったらもっと簡単だよね~と思いつつも悔しいからjqueryは使わない。スライダーはCSS3のTrantisionを利用してアニメーションさせています。

Youtube Movie

スライダー表示用スイッチは自動的に追加されます。あのよくある3本線のやつね。CSSで装飾や配置は調整可能。head内に表示してもいいし、表示しなくてもいいし。

ウニッと出るナビゲーション自体も横から出してもいいし上からだしてもいいし、設計者の思いのままに設計すればいいと思うよ。

ResponsiveNav.jsの機能

ResponsiveNav.jsには以下の機能が盛り込まれております。

スライドメニューを自動追加
スライドメニューっつーかスライダーっつーか、スマホサイトでよくあるあの横からピロッと出てくる系のメニューを自動的に追加します。あの3本線のボタンを押すとよく出てくるアレね。
スライド式メニューはすべてCSSで制御
スライド式のメニューはすべてCSSで見た目を制御。例えば左から出てくるとか右から出てくるとか、そういったことを含めてすべての要素をCSS3で制御できるようになっております。もちろんアニメーション要素もね。

ResponsiveNav.jsのデモ

ResponsiveNav.jsのサンプル
まぁ見てみてください。思う存分見るといい。そして楽しむといい。少し休んでから、また見るといい。

ResponsiveNav.jsの更新履歴

2013-11-22レスポンシブナヴ公開第1弾。

ResponsiveNav.jsのダウンロード

ResponsiveNav.jsのダウンロード

ResponsiveNav.jsの過去のバージョン

Release Version Download
2013-11-22 1.0.0 Download

ResponsiveNav.jsのユーザレビュー

必須お名前
必須メールアドレス
必須確認のためもう一度
必須評価
必須レビュー内容
必須掲載確認