Lesson 05 階層構造がわかりやすい多重階層メニュー - Webデザイン表現&技法の新・ナビゲーション編

Webデザイン 表現&技法の 新・スタンダード

Lesson05

階層構造がわかりやすい 多重階層メニュー

制作・文

宮﨑優子（ビーズスタジオ）

jQueryプラグインである「Superfish」を利用すると、ドロップダウン形式の階層型ナビゲーションを手軽に実現できる。コンテンツの階層構造を 意識したメニューにしたい場合におすすめだ。

「Superfish」のサイトからzipファイルをダウンロードしてくる【1-1】。ダウンロードしてきたファイルで使用するのは「superfish.css」「superfish-navbar.css」「superfish.js」「hoverIntent.js」の4つ。また、配布サイトでは第3階層までの説明しか存在せず、それ以上の階層は想定されていないようだ。そのため、IE6、7では第4階層から第3階層の下にulが潜り込んで表示されてしまう【1-2】【1-3】。クロスブラウザを意識するなら第3階層以降のulの入れ子は避けたほうがよいだろう。


【1-1】http://users.tpg.com.au/j_birch/plugins/superfish/#download


【1-2】IE6：赤線で囲ってある箇所（第4階層目）が前の階層に隠れてしまっている


【1-3】Firefox：第4階層は正しく表示されている

必要な要素をXHTMLでマークアップする。メニューはすべてul、liでマークアップを行い、混乱を避けるためにコメントアウトをこまめに行うか、ulにクラス名を付けておくなど、工夫して階層構造を明確にしておく。第1階層、第2階層、第3階層と階層を増やしていく場合は前階層のliにulを入れ子にする【2-1】【2-2】。


【2-1】



【2-2】マークアップ後の状態

では、ダウンロードした「superfish.css」「superfish-navbar.css」を実装していこう。まず「superfish.css」を実装する。ul には「sf-menu」「sf-js-enabled」「sfshadow」をクラスで指定する。liの背景色、liやaのhover後の色やulのサイズ等はそのつど確認をしながら編集していく。この時点では第2階層はまだ横並びにはならない【3-1】。


【3-1】superfish.cssを実装した後。JavaScriptを実装しなくてもCSSでここまで動きをコントロールできる

次に「superfish-navbar.css」を実装する。ulのクラスに「sf-navbar」を追加指定する。「superfish.css」と同じく適宜確認しながら編集していこう【4-1】。


【4-1】「superfish-navbar.css」実装後の状態。第二階層が横並びになった

CSSの実装が終わったら次にJavaScriptを実装する。「superfish.js」「hoverIntent.js」をhead内で読み込み、ulのクラス「sf-menu」をトリガーにしてjsが作動するよう実装する【5-1】。


【5-1】

IE6を対象にする場合は、ブラウザを判別して【05】のコードを実装する必要がある。「sf-shadow」でpng画像を使っているため、このままIE6で表示するときれいに見えない【6-1】。

この場合は、jQueryでブラウザがIE6の時にulに指定してあるクラス「sf-shadow」を消去するように指定をおこなう。まずはブラウザの判別を行う為のコードを実装する【6-2】。判別に用いた条件については【6-3】を参照していただきたい。判別時に実装したコードでは「jQuery.browser」「jQuery.browser.version」ではなく「jQuery.support」を使用したため長いものになっているが、jQuery1.3からは「jQuery.browser」「jQuery.browser.version」は非推奨となっており、今後廃止される可能性が高い。


【6-1】IE6で表示


【6-2】上記を外部ファイル化して使用


【6-3】条件式で使用した「jQuery.support」の一覧（出典：http://w3g.jp/blog/tools/jquery_browser_sniffing）

次にIE6以外の条件式内には【5-1】で実装したコードを記入する。IE6の条件式内では先に「sf-shadow」を消去するコードを実装し、【5-1】のコードを実装する【7-1】。


【7-1】「.removeClass」でクラス「sf-shadow」を消している