札幌Web制作のシンクグラフィカ

ResponsiveNav.js

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

ResponsiveNav.jsの概要

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

スライダー表示用スイッチは自動的に追加されます。あのよくある3本線のやつね。CSSで装飾や配置は調整可能。head内に表示してもいいし、表示しなくてもいいし。 ウニッと出るナビゲーション自体も横から出してもいいし上からだしてもいいし、設計者の思いのままに設計すればいいと思うよ。

ResponsiveNav.jsの機能

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

デモサイト

https://lab.synck.com/ResponsiveNav.js/example.html

最新版を無料ダウンロード

ResponsiveNav.jsの更新履歴

更新日 バージョン 更新内容
2013-11-22 1.0.0 レスポンシブナヴ公開第1弾。