iPadスライド型ナビゲーションメニューUIをつくってみる。iPadスライド型ナビゲーションメニューUIをつくってみる。iPadのナビゲーションとして使用されている、メニューリストをクリックすると、スライドして次のリストが現れるメニューUI。Webサイト上でもこれを使って、メニューを構成するのもおもしろいかと思い、jQueryで実験的につくってみました。リスト内の「▲(右向き)」が付いているものをクリックすると、次のリスト一覧がスライドして現れます。このサンプルのHTMLソースは以下のような記述。05</a></li></ul></div><!--/ip_menu-->無駄に長くなっていますが、HTML側は基本的にリストの入れ子にするのみです。BACK」ボタンはリストが入れ子になることで自動で付加されます。全体を囲う<div>及び<ul>のIDの名前は任意ですが、SCRIPT側で使用するので、変更する際はSCRIPTの変更も必要になります。SCRIPTの記述は以下のように。BACK」ボタンを付加しておきます。値はメニューリストの枠の大きさになり、areaWidth(幅)はリストボタンの大きさに比例しています。高さが300px以上になったらスクロールバーを出しています。ここの値を変更することでメニューボタンの大きさを変更することが可能になっています。非表示にしていた子要素<ul>を表示に切り替え、親リストをareaWidth分左にスライドさせています。BACK」ボタンクリック後はその逆の動作。)こんな感じのSCRIPTでiPhoneメニューUIをWebサイト上に実装することが可能になります。以下のようなSCRIPTになります。さを親リストの値をみるようにします。実行させて、親リストの高さを毎回を変更します。HTMLソースについては変更なしです。≫スクロールバーを出さないパターンのサンプルはこちらちなみに上記2パターンのCSSは以下のように記述しています。inline-block;}CSSについてはボタンの装飾などあると思うのでその都度、変更が必要になります。上記2パターンのサンプルはいちよIE6、7とかでも正常に動作します。メニューエリアの幅をブラウザのウィンドウに合わせて、めいっぱいにすることで、iPhoneサイト用のSCRIPTとしても使えるハズ。(まだそのサンプルは作っていませんが。)まだまだ改善すべきところはある気もしますが、Webサイト上にiPhoneメニューUIを実装する際などに是非。上記サンプルのデータをダウンロードしたい場合はこちらから≫jQuery_iPhoneMenuUI.zipあくまで実験段階のものなので、ライセンスとか特に何もありません。PostsjQueryでスクロール追尾型メニューリストを作ってみるjQueryでのチェックボックスのクリック動作向上:Ver.2jQueryで入力フォームの「必須項目」などのインターフェースを考えてみる。jQueryでツールチップ。iPadスライド型ナビゲーションメニューUIをつくってみる。スライドして次のリストが現れるメニューUI。※コメントにHTMLタグを直接入力しないでください。※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。iPadスライド型ナビゲーションメニューUIをつくってみる。Webサイト構築に関する技術やWebサービスを紹介するブログです。jQueryをはじめとしたWebサイトを彩る技術のほか、HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。