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

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の更新履歴