スタイルシートマニア
スマホサイズのナビゲーションを最適化 | ホームページカスタマイズ Tips
またまた、最近話題のブラウズサイズに合せてCSSを最適化する「Fluid Grid Layout」に便利なお話。
タブレットやPCサイズなら問題ないんですが、スマホのナビゲーションで困った事はないでしょうか?
特に一つのソースでマルチにみせるFluid Grid Layoutだと「スマホだけにjQuery Mobileを使うわけにもいかず、ナビゲーションが・・・。」みたいなことを経験している人は少なからず存在していると思います。(僕もその一人です。)
そんなスマホサイズのナビゲーションにお困りの方にはこれ!
Big Menus, Small Screens: Responsive, Multi-Level Navigation
サンプル:http://source-marine.net/css-mania/sample/tessa-lt-dropdowns/
試すときは、以前の記事でご紹介したResizerを使うと便利です。
仕組みとしては、jQueryでブラウズサイズを取得して768以下だったら、toggleMenuのdisplayをinline-blockで表示させているようです。
時間があれば記事にしようと思います。
ダウンロード:http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868.zip
« 前の記事 | 次の記事 » |