[JS]多くのコンテンツが設置できるドロップダウン型のナビゲーション -jDiv
Post on:2010年2月3日
sponsors
洗練されたエフェクトでドロップダウンが開閉するナビゲーションをSkyrocket Labsから紹介します。
デモでは左端の「Rollover Me!」のドロップダウンに多くのコンテンツが設置できるパネルが設定されており、リストや画像など複雑なものも配置が可能です。
ナビゲーションはリスト要素、パネルはdiv要素で実装されており、デザインのカスタマイズはCSSで自由に設定ができます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<textarea name="code" class="html" cols="60" rows="5"> <!-- BEGIN MAIN NAV MENU--> <div id="menu"> <ul> <li><a href="#" id="menu1">Rollover me!</a></li> <li><a href="#">Link # 2</a><</li> <li><a href="#">Link # 3</a></li> </ul> </div> <!-- END MAIN NAV MENU--> <!-- BEGIN HIDDEN DIV CONTENT --> <div id="hidden-div"> <div id="hidden-div-left"> <h4>This is the hidden panel that can display any content you wish.<br/><br/>Perhaps you would like a description here and your section's links to the right.</h4> </div> <div id="hidden-div-right"> <ul class="submenu"> <li><a href="#">» List item #1</a></li> <li><a href="#">» List item #2</a></li> <li><a href="#">» List item #3</a></li> <li><a href="#">» List item #4</a></li> <li><a href="#">» List item #5</a></li> </ul> </div> </div> <!-- END HIDDEN DIV CONTENT --> </textarea> |
対応ブラウザは、IE7/8, Fx3, Safari, Chromeで動作テストを行ったとのことです。
jDivはjQueryのプラグインのため、実装にはjquery.jsが必要です。
sponsors
