ニコニコ動画のPSP変換方法、アニメ銀河英雄伝説の壁紙、CSSリファレンスなど、趣味に偏った情報を公開中

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

z-indexを用いてFLASHオブジェクトの上にメニューなどを表示させる

メニューにFLASHを使わずに、FLASHメニューみたいにカッコイイメニューを作りたいということで、
FLASHの上に通常の画像で作ったメニューを乗っけてみました。
CSSの"z-index"がポイントです。

こちらがサンプルHTMLです↓
sample.html

IE6では透過PNGが透過されないため、↓下の画像をご覧ください。IE7やFirefoxなどではこのように見えます。
メニューサンプル
※サンプルページ内のメニューの作り方はこちらのページで紹介していますのでご覧ください。

仕掛けはいたってシンプル。

FLASHとメニュー部分をブロック要素<div>で囲って、それぞれにz-indexで番号をつけ、メニューをmarginで上にずらして表示させます。


※z-index… 重なりの順序を指定。値が大きいものほど上になる。
※margin-top… ブロック要素の上の隙間の幅。この場合マイナスにすることによって上にずらした。

ソースを単純に書くと、

<div style="position: relative; margin: 0px auto; z-index: 1; ">
object要素でフラッシュ貼り付け
</div>
   
<div style="position: relative; z-index: 2; margin-top: -60px; ">
メニュー部分
</div>


いかがでしょうか?
このメニューは単なる画像ですが、プルダウンにしたら、もう少しかっこよくなるかも。

------------
 無料のFLASH素材サイトがたくさんあるせいか、最近デザイン重視のサイトが多い気がします。

 はっきり言ってわたしはあまり好きではありません。
 FLASHのメニューって見づらくないですか?
 きれいだけど、リンク先を別窓で開けないし、接続状況によっては重い場合もあります。
 また、マウスオーバーしてもステータスバーにURLが出ないため、リンク先アドレスが信頼できない場合も。

 使い方を工夫すれば、CSSでも十分スタイリッシュにできるはず…



このページの関連記事

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

メニュー

以下はクリックすると、下位メニューに飛びます。

↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ----------------------------
メニューにない記事はサイトマップへ
カテゴリー
プロフィール

みやま

Author:みやま

地域ブランド力 45位の茨城県在住
20代/女
  • ガンダムと攻殻機動隊と銀河英雄伝説が大好きだ
  • 士郎正宗の描く尻は素晴らしいと思う
--------------------
近況報告、更新情報などツイートしていく予定です。
ツイッターへのリンク@miyama_tweet

リンク
↓バナーとHTMLタグ↓

<a href="http://gogosanzi.blog46.fc2.com/" target="_blank" title="AGPP~趣味に偏った情報を公開"><img src="https://blog-imgs-37.fc2.com/g/o/g/gogosanzi/agpp-bunner.jpg" alt="agpp-bunner" border="0" width="200" height="40"></a>
    ↓登録させていただきました↓
  • loghsearch
銀河英雄伝説名言録


present by 田中芳樹:徳間書店「銀河英雄伝説」
 
  
AGPP TOP > カテゴリー [HTML活用 ]
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。