- ベストアンサー
メニューにアニメーションポップアップをつけるには
このサイト http://azupiano.net/ のコンテンツメニューで、メニューにマウスポインタを置くと そのメニューについてのポップアップがアニメーションで表示 されます。この機能を実現したいのですが、実現するのに参考 にするサイトはないでしょうか？ Javaは結構やりこんだんですが、JavaScriptはまったくやった ことがなくて、この機能かっこいいなぁと思ってやりたくなり ました。そのあたりも考慮した参考サイト教えてください。
- marucha
- お礼率38% (127/329)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
JavaScriptでの ブラウザ間の互換、タイマー、レイヤーオブジェクト、スタイルシート、イベントハンドラが分かれば作れると思います。 http://www.tohoho-web.com/www.htm レイヤーオブジェクトはDOMで作れます。それにスタイルシートを適用して隠しておく、イベント時にタイマーで徐々にスタイルシートを変更していくとできると思います。 実装されているサイトのソースも見てください
関連するQ&A
- ポップアップメニューをつくるには
メニューのところにマウスを乗せたとき、メニューのすぐ下にリンクが出る形のポップアップメニューを作りたいと思っています。 Dreamweaver2004を使ってるので、ソフトの機能でポップアップメニューを作れますが、これでやると長々と分かりにくい文がついてくるので、できれば他の方法でやりたいです。 もっとすっきりしたプログラムで、マウスを乗せると出てきてはずすと消えるタイプのポップアップメニューの参考例はないでしょうか？ ずっと探していますが、どうしても見つけることができません。 HPなど教えていただけるとありがたいです。 よろしくお願いします。
- 締切済み
- JavaScript
- ポップアップメニューに"?"
FireworksとDreamweaverでポップアップメニューを作りました。 最初は問題なく作動していたのですが、他をいじっているうちに ポップアップメニュー上にクエスチョンマークが表示されるようになりました。 （マウスポインタを持っていくと出てきます。） 自分なりに調べてみたら、mm_menu.jsを移動させた事が原因という事がわかりました。 しかし対処法がわかりません。（ファイルを元通りの場所に戻しても変わりませんでした。） 初心者でJavaScriptのソースを見てもどこに問題があるのか分からず、 いっその事作り直そうかと思いましたが、十分な時間もまた同じ物を作る自信もなく躊躇しています。 もし簡単に直せる方法があるなら教えていただけると大変助かります。 都合のいい事を言っているのは承知していますが身動きがとれずに困っています。 どなたか教えて下さい。お願いします。
- 締切済み
- JavaScript
- ポップアップメニュー上でアクション
Javaアプレットのポップアップメニューに関する質問です。 マウスカーソルがポップアップメニュー上を移動するだけで、アクションを起こせるようにしたいのですがこのようなことは可能でしょうか？ また、ボタンをクリックするとパソコン内のHTMLファイルをブラウザで開けるように、つまりリンクを貼りたいのですが、これも教えていただけないでしょうか。
- 締切済み
- Java
- ポップアップメニューを使っても大丈夫?
現在、ホームページ作成初心者ながらもオンラインショップページを作成している者です。( ・_・;)商品のカテゴリを大まかに作り、そのカテゴリにカーソルをを持っていくと詳細ジャンルがポップアップで出てくるというに仕様にしたのですが、以前商用サイトは、全ての環境を考慮してページを作るべきで出来る限りのアクションは避けたい等の意見を何処かのページで見た事があります。詳しくは分からないのですが、ポップアップメニューはJavasprictで組んであり、広告ページの紛らわしさのためにJavaを有効にしていない方もたくさん見えると聞きました。Webを生業している方で、商用ページを作るときに気に掛けている事等、今後の参考(とは言ってもたいした技はできませんが..)のためお教え下さい。宜しくお願いいたします。
- ベストアンサー
- レンタルサーバ・ASP
- Dreamweaverでポップアップメニューが・・・
Dreamweaver8でホームページを作成しているのですが、ポップアップメニューの表示で困っています。 メニューバーにマウスポインタを合わせると下向きにポップアップメニューが表示されるようにしているのですが、メニューバーの下段にはFlashムービーがはりつけてあり、ポップアップメニューがFlashムービーの背面に表示されてしまいます。ポップアップメニューをFlashムービーの前面に表示させるいい方法がありましたら教えてください。 ちなみにポップアップメニューは「ビヘイビア→ポップアップメニューを表示ページ」にて作成。レイアウトはセンター揃えのレイアウトとなっております。 以上、どなたか解決策をご存知の方はよろしくお願いいたします。
- ベストアンサー
- CSS
- ポップアップメニューの作成方法
例えばMicrosoftのトップページの http://www.microsoft.com/japan/ のように、ポップアップメニューを画像ではなく HTML(Javascript)で表示させたいのですが、 どのような方法があるでしょうか？ 画像では出きるのですが小さいフォントを使うと 潰れて見えなくなります。 参考サイトなどがあれば教えていただきたく思います。
- 締切済み
- HTML
- ツリーメニューのアニメーションについて
こんにちわ。 アニメーションのツリーメニューを自分のサイトで使用したいと考えております。 javascriptを参考に、取り込んでみましたが、FireFoxで動作しません。 どうやら、もともとFireFoxで動作していないようです。 このようなアニメーションのツリーメニューを使用しているサイト、ご存じの方がいましたら教えて頂けないでしょうか？ できればIE、FireFox、Opera、Safari で動作するものか ブラウザごとに使うjavascriptを分けているサイトを教えて頂けるとうれしいです。 宜しくお願いします
- 締切済み
- JavaScript
- ポップアップメニューＦｉｒｅWorks
FireWorksMXでポップアップメニューを作っています。 縦メニューですが、ポップアップエディターでコンテンツのところのテキストを改行するってできませんか？ 幅をボタン画像の幅からはみ出したくないんです。 高さが変わる分には良いのですが・・・ なにか良い方法ありませんか？ DWMXもありますので、そちらでも良いです。 アドバイス下さい。m(._.*)mペコッ
- ベストアンサー
- グラフィックソフト
- ボタンにマウスがかさなるとポップアップ表示
ボタンにマウスがかさなると説明文をポップアップ表示させたいのですが。参考サイトお教え下さい。 （できればjavascriptは使いたくないのですが）
- ベストアンサー
- HTML
- ポップアップメニューの制御について
こんにちは。 現在、ポップアップメニューの制御がうまくいかず困っております。 [やりたいこと] ・リンクの上にマウスを置くとポップアップメニューが開く ・ポップアップメニューからマウスが外れるとポップアップメニューを閉じる ・対応したいブラウザはIE6,IE7,FireFox2.0 他のサイトを参考にした結果、onmouseoverのイベントでメニュー表示まではできたのですが、メニューからマウスを外した時にメニューを閉じる処理がうまくいっておりません。onmouseoutを使うとできそうなのですが、メニューからではなく、リンクからマウスを外した時にメニューが消えてしまい困っています。 解決のヒントになることでも結構ですので、アドバイスを頂けたらと思います。現在はclearTimeSetやclearTimeoutで制御できないかを調べている最中です。 よろしくお願いいたします。 [HTMLのソース(一部抜粋)] <div id="testmenu1" style="position: absolute;visibility: hidden;(省略)"> <ul style="(省略)"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <div id="testmenu2" style="position: absolute;visibility: hidden;(省略)"> <ul style="(省略)"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <table> <tr><td> <a href="" onclick="return false;" onmouseover="testShowPopupMenu('testmenu1'); return false;" onmouseout="testHidePopupMenu('testmenu1'); return false;">メニュー1</a> </td></tr> <tr><td> <a href="" onclick="return false;" onmouseover="testShowPopupMenu('testmenu2'); return false;" onmouseout="testHidePopupMenu('testmenu2'); return false;">メニュー2</a> </td></tr> </table> [JavaScriptのソース(一部抜粋)] var mX = 0; var mY = 0; var pX = 5; // マウスから右に5ピクセルずらす var pY = 5; // マウスから下に5ピクセルずらす document.onmousemove = testGetMousePoint; // マウス位置取得 function testGetMousePoint() { mX = event.clientX + document.body.scrollLeft; mY = event.clientY + document.body.scrollTop; } // ポップアップメニューの表示 function testShowPopupMenu(id) { pop = document.getElementById(id).style; pop.visibility = "visible"; pop.left = mX + pX + "px"; pop.top = mY + pY + "px"; } // ポップアップの非表示 function testHidePopupMenu(id) { document.getElementById(id).style.visibility = "hidden"; }
- ベストアンサー
- JavaScript
お礼
とりあえず、ソースから作り上げることはできましたが、 中身はあまり理解できていません。 また、勉強しなおそうかと思います。 回答ありがとうございました。