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

ResponsiveNav.jsを公開

スマホサイトによくある横からシャーッと出てくるスライドナビゲーションを簡単に後付実装するためのスクリプトです。

2013-11-22

よくあるじゃないですか、スマホサイトやスマホアプリに横からヌメッと出てくるナビゲーション。アレを比較的簡単にかつレスポンシブWebデザインに干渉しないように実装するためのスクリプトです。ややこしいね。

特定クラス名のnav要素からaタグを収集してそれをまとめたスライドナビゲーションをbodyに突っ込んで、トグルスイッチも突っ込んで、スイッチ押されたら出す!みたいなスクリプトです。CSS3のTransitionを使うことでアニメーションを実現しているため、Javascript自体は設定項目がありません。

PCサイトやスマートフォンサイトで形を変えてそのまま利用する想定で書いたので、まぁそんなに出来は悪くないんじゃないかなぁと思います。使う機会があれば使ってみてね。

ResponsiveNav.js