以前画面の外から出てくるスートフォンのメニューと言う記事で、jQueryのslideDownとslideUpを使って実装するナビゲーションを取り扱いましたが、最近制作したもう一つの方のサイトに実装してみました。 以前はスマホサイト用に作っている最中のものをご紹介したのですが、今回はレスポンシブでPCにも対応させます。

まずはjQuery、イージングと「Androidでoverflowした要素をスクロール可能にするjQueryプラグイン」で紹介されていた、Androidでoverflowするとスクロールできない問題を解消するためのjquery.overflowScroll.jsを読み込みます。 記述位置はbody閉じタグ直上でもヘッダーでも大丈夫です。

slideDownでナビを表示させ、モーダルウィンドウ展開中はスクロールを禁止します。IE7やiPhoneはこのままではスクロールしてしまいますので別途対処が必要ですが、今回はい行いません。

slideUpでナビを閉じスクロール禁止を解除します。

例のAndroidでスクロールするための記述です。

今回はグローバルを固定してそれ以外の全画面に展開する仕様なのでナビの高さと余白を減算し、画面の高さを取得します。 スマホはアドレスバーが展開時と非展開時では高さが違いますので、高さの取得はクリック時にしています。 それとは別に画面サイズを変更した時にも高さを取得するために関数化しています。

とりあえずはこれだけでOKですが本格的にAndroidやクロスブラウザ対応するとなると、もっとちゃんと考えないと駄目ですね！ ですが、逆に言うとこれだけでこの程度のものなら簡単に実装できちゃうjQueryはやっぱ便利ですね。もっと勉強しないと・・・。

イージングのライブラリー
jquery.overflowScroll.js
実装したページはこちら

該当箇所のsassです。commonは全てのデバイス、phoneはスマホ、screenはPCです。

実装したページのトップページはキービジュアルの下にグローバルナビナビが配置されていますので、メニュー展開時に次のブロックにスクロールするようにしています。