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

サイト構築 -CSS

Post on:2008年3月1日

sponsorsr

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

A flyout menu over flash objects

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

swfの埋めこみの記述

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

<textarea name="code" cols="60" rows="5"><param name="wmode" value="transparent" /><embed wmode="transparent"></embed></textarea>

<textareaname="code"class="html"cols="60"rows="5">

<paramname="wmode"value="transparent"/>

<embedwmode="transparent"></embed>

</textarea>

IE6, 7用のスクリプト

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

<textarea name="code" cols="60" rows="5">onload = function(){theObjects = document.getElementsByTagName("object");for (var i = 0; i < theObjects.length; i++){theObjects[i].outerHTML = theObjects[i].outerHTML;}}</textarea>

<textareaname="code"class="html"cols="60"rows="5">

onload=function(){

theObjects=document.getElementsByTagName("object");

for(vari=0;i<theObjects.length;i++){

theObjects[i].outerHTML=theObjects[i].outerHTML;

}

</textarea>

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

追記：

2008年3月1日: はてブのvv_boow_vvさんのコメントから; 僕のMac OS X+Fx 2.0の環境でも動作しませんでした。
階層は開くけど、クリックができない。

Movatterモバイル変換

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

swfの埋めこみの記述

IE6, 7用のスクリプト

追記：

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info