このサイトの上部の黒いタブにマウスを載せると

横一列にサブメニューが現れます。
http://www.canon-ci.co.kr/
これはFlashを使っていますが、
CSSとJavascriptだけで実現したいと思っています。
サンプルややり方が書いてあるサイトはありますか?

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:2006/03/24 12:56:58
  • 終了:2006/03/31 13:00:05

回答(2件)

id:sudayosiaki No.1

sudayosiaki回答回数204ベストアンサー獲得回数62006/03/24 17:10:54

id:ogw_fox

ありがとうございます。

サブメニューが横に広がるタイプのものは

やっぱりないのでしょうか。

2006/03/24 22:24:46
id:bonlife No.2

回答回数421ベストアンサー獲得回数752006/03/25 02:55:25

ポイント33pt

「サブメニューが横に広がる」というのはどういうイメージでしょうか。

id:sudayosiakiさんの回答の2番目のURLで紹介されているサンプルはかなりご要望に近いように思うのですが。

似たようなサンプルでonMouseOut時の処理が質問にあるサイトにより近い(マウスカーソルが外れるとサブメニューが非表示になる)ものがありました。

一度確認してみてください。

個人的にはid:sudayosiakiさんの2つ目のURLのサンプルの方がメニューの数に影響されないキレイなソースだと思いますが、私の環境では画像の表示が遅く、ロールオーバーがうまく機能していませんでした。

CSSで背景画像として読み込んでいるためでしょうか…。

どちらのサンプルを元にしても良いと思いますが、文字列の部分を画像(たとえばアニメーションGIF)にしたり、あるいはJavaScriptのライブラリと組み合わせたりしてグラフィックを変えるとより良いと思います。

script.aculo.usのFadeあたりと組み合わせると面白いかもしれません。

参考URL (script.aculo.usを使ったエフェクト)

また、この質問とは直接関係ありませんが、画像のロールオーバーもJavaScriptではなくCSSで行うのが流行っているようです。

ただ、JavaScriptを使って事前に画像を読み込ませた上で行うロールオーバーに比べて、CSSのみで行うロールオーバーは画像切替時にチラツキがあるような気がしました。

参考URL (CSSでのロールオーバー)

参考になる内容があると幸いです。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません