[JS]多くのコンテンツが設置できるドロップダウン型のナビゲーション -jDiv

洗練されたエフェクトでドロップダウンが開閉するナビゲーションをSkyrocket Labsから紹介します。

jDiv
デモページ

デモでは左端の「Rollover Me!」のドロップダウンに多くのコンテンツが設置できるパネルが設定されており、リストや画像など複雑なものも配置が可能です。

ナビゲーションはリスト要素、パネルはdiv要素で実装されており、デザインのカスタマイズはCSSで自由に設定ができます。

HTML

<!-- 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 -->

対応ブラウザは、IE7/8, Fx3, Safari, Chromeで動作テストを行ったとのことです。

jDivはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Post on:2010年2月3日