人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: ogw_fox
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS FLASH JavaScript サイト マウス
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● sudayosiaki
●34ポイント

http://www.stylish-style.com/csstec/ultimate/css-roll-1.html

http://www.wiredope.com/csstemp/css_dynamicimgtab_demo.html

http://www.wsb.jp/hpb/java_s/fav_b/bra_script.htm

http://popup.tok2.com/home2/yosiaki/Menu-P.html

一番下のサンプルはこれです。

http://popup.tok2.com/home2/yosiaki/Menu-P7.html

◎質問者からの返答

ありがとうございます。

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

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


2 ●
●33ポイント

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

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でのロールオーバー)

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ