[CSS]Flashを背景にして動作する、階層型ナビゲーション

CSS playのエントリー「A flyout menu over flash objects」から、Flashを背景にして動作する、階層型ナビゲーションの紹介です。

A flyout menu over flash objects

通常、Flashを背景とするとうまく動作しませんが、下記の手法を使用して実装しています。

swfの埋めこみの記述

「wmode」に、「transparent」を指定。
※swfファイルの背景色を確認する。

<param name="wmode" value="transparent" />
<embed wmode="transparent"></embed>

IE6, 7用のスクリプト

objectがリンクのように動作するのを防ぐため、下記の「flashfix.js」を外部スクリプトとして使用する。

onload = function(){
	theObjects = document.getElementsByTagName("object");
	for (var i = 0; i < theObjects.length; i++){
		theObjects[i].outerHTML = theObjects[i].outerHTML;
	}
}

階層型ナビゲーションの箇所は、スクリプトがオフでも動作するように、IE6用にtableを使用して制作されています。

追記：

2008年3月1日

はてブのvv_boow_vvさんのコメントから

僕のMac OS X+Fx 2.0の環境でも動作しませんでした。
階層は開くけど、クリックができない。

Post on:2008年3月1日