スタイルシートマニア

スマホサイズのナビゲーションを最適化 | ホームページカスタマイズ Tips

またまた、最近話題のブラウズサイズに合せてCSSを最適化する「Fluid Grid Layout」に便利なお話。
タブレットやPCサイズなら問題ないんですが、スマホのナビゲーションで困った事はないでしょうか?
特に一つのソースでマルチにみせるFluid Grid Layoutだと「スマホだけにjQuery Mobileを使うわけにもいかず、ナビゲーションが・・・。」みたいなことを経験している人は少なからず存在していると思います。(僕もその一人です。)
そんなスマホサイズのナビゲーションにお困りの方にはこれ!

Big Menus  Small Screens  Responsive  Multi Level Navigation   Webdesigntuts
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

Author:庄野英朗
Comments:0

庄野英朗

Source Marine 代表
デザイン・コーディング・PHPアプリケーションまでこなす。
マルチデザインプログラマ。

コメントを残す