Tab menu with images

画像を使ったタブ式インタフェースが簡単に作れる「Tab menu with images」。

次のようなタブ式インタフェースを簡単に作れるようです。
作成する際のHTMLは説明にも書いてある通り、クリーンなものになります。



メニュー部分のＨＴＭＬは次のような感じでクリーン。
タブをマウスオーバーすると下位層のメニューが現れますが、そのメニューも次のHTMLコードに含まれています。

<!-- メインメニュー-->
<div id="mainMenu">
 <a>Products<img src="images/tabmenu_right.gif"></a>
 <a>Support<img src="images/tabmenu_right.gif"></a>
</div>
<!-- サブメニュー-->
<div id="submenu">
 <!-- The first sub menu -->
 <div id="submenu_1">
  <a href="http://www.dhtmlgoodies.com">Product 1</a>
  <a href="http://www.dhtmlgoodies.com">Product 2</a>
  <a href="http://www.dhtmlgoodies.com">Product 3</a>
 </div>
 <!-- Second sub menu -->
 <div id="submenu_2">
  <a href="http://www.dhtmlgoodies.com">Phone</a>
  <a href="http://www.dhtmlgoodies.com">Email</a>
  <a href="http://www.dhtmlgoodies.com">Knowledge base</a>
 </div>
 </div>
</div>

画像とCSSを入れ替えれば独自のタブインタフェースが簡単に作れそうですね。
設置方法はこちらのページで見ることが出来ます。

関連エントリ

• クロスブラウザで動作可能なカレンダーウィジェット「Cross browser javascript calendar」
• フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」
• Ajaxで同一ページ内でページ送りを実現する「Ajax scrolling pages」