Webデザイン |
Lesson05 | 階層構造がわかりやすい 多重階層メニュー |
制作・文 | 宮﨑優子(ビーズスタジオ) |
jQueryプラグインである「Superfish」を利用すると、ドロップダウン形式の階層型ナビゲーションを手軽に実現できる。コンテンツの階層構造を 意識したメニューにしたい場合におすすめだ。 |
01
【1-1】http://users.tpg.com.au/j_birch/plugins/superfish/#download
【1-2】IE6:赤線で囲ってある箇所(第4階層目)が前の階層に隠れてしまっている
【1-3】Firefox:第4階層は正しく表示されている
02
【2-1】
【2-2】マークアップ後の状態
03
【3-1】superfish.cssを実装した後。JavaScriptを実装しなくてもCSSでここまで動きをコントロールできる
04
【4-1】「superfish-navbar.css」実装後の状態。第二階層が横並びになった
05
【5-1】
06
この場合は、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)
07
【7-1】「.removeClass」でクラス「sf-shadow」を消している