• ベストアンサー

画像表示のようなきれいなプルダウン

例えばマイクロソフトのサイト（http://www.microsoft.com/japan/）のトップメニューにあるように、マウスオーバで、画像で作ったようなきれいなプルダウンが開くのは、どうのように行っているのでしょうか？

質問者が選んだベストアンサー

  • ベストアンサー
  • ittochan
  • ベストアンサー率64% (2667/4137)
回答No.3

右クリックの場合なんですが ↓これを綺麗にしたものだと思います。 <HTML><HEAD><TITLE></TITLE> <STYLE>.menuItem { PADDING-LEFT: 20px; FONT-SIZE: 10pt; WIDTH: 150px; COLOR: black; FONT-FAMILY: sans-serif; BACKGROUND-COLOR: menu } .highlightItem { PADDING-LEFT: 20px; FONT-SIZE: 10pt; WIDTH: 150px; COLOR: white; FONT-FAMILY: sans-serif; BACKGROUND-COLOR: highlight } .clickableSpan { BORDER-RIGHT: gray 5px solid; PADDING-RIGHT: 4px; BORDER-TOP: gray 5px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: gray 5px solid; WIDTH: 500px; COLOR: white; PADDING-TOP: 4px; BORDER-BOTTOM: gray 5px solid; BACKGROUND-COLOR: blue } </STYLE> <SCRIPT> //<!-- function displayMenu() { whichDiv=event.srcElement; menu1.style.leftPos+=10; menu1.style.posLeft=event.clientX; menu1.style.posTop=event.clientY; menu1.style.display=""; menu1.setCapture(); } function switchMenu() { el=event.srcElement; if (el.className=="menuItem") { el.className="highlightItem"; } else if (el.className=="highlightItem") { el.className="menuItem"; } } function clickMenu() { menu1.releaseCapture(); menu1.style.display="none"; el=event.srcElement; if (el.id=="mnuRed") { whichDiv.style.backgroundColor="red"; } else if (el.id=="mnuGreen") { whichDiv.style.backgroundColor="green"; } else if (el.id=="mnuBlue") { whichDiv.style.backgroundColor="blue"; } else if (el.id=="mnuYellow") { whichDiv.style.backgroundColor="yellow"; } } //--> </SCRIPT> </HEAD> <BODY oncontextmenu="displayMenu();return false" vLink=#808080 aLink=#000000 link=#000000 bgProperties=fixed bgColor=#ffffff leftMargin=0 topMargin=0> 右クリックしてね。 <BLOCKQUOTE class=body> <DIV id=menu1 onmouseover=switchMenu() style="BORDER-RIGHT: gray 3px outset; BORDER-TOP: gray 3px outset; DISPLAY: none; BORDER-LEFT: gray 3px outset; WIDTH: 150px; BORDER-BOTTOM: gray 3px outset; POSITION: absolute; BACKGROUND-COLOR: menu" onclick=clickMenu() onmouseout=switchMenu()> <DIV class=menuItem id=mnuRed>Red ittochan</DIV> <DIV class=menuItem id=mnuGreen>Green ittochan</DIV> <DIV class=menuItem id=mnuBlue>Blue ittochan</DIV> <DIV class=menuItem id=mnuYellow>Yellow ittochan</DIV></DIV> </BLOCKQUOTE> </BODY> </HTML>

その他の回答 (2)

  • ryota2
  • ベストアンサー率43% (61/140)
回答No.2

あれはJavaScriptで作ってあります。 画像じゃありません

bluecafe117
質問者

補足

JavaScriptは、ある程度はわかります。JavaScriptでどのようにして実現するのでしょうか？

  • taknt
  • ベストアンサー率19% (1556/7783)
回答No.1

プルダウン？ 画像で作ったような・・・・ マイクロソフトのＨＰを見るときに画像の表示をオフにして見れば、 どれだけ画像が使われてるかすぐわかりますよ。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. その他（プログラミング・開発）

関連するQ&A

  • プルダウンメニューについて

    お世話になります。 マイクロソフトのホームページ（http://www.microsoft.com/japan/）の 上の右側のように、マウスを持って行っただけで、 プルダウンメニューのように表示させたいのですが、 どうしたら良いのでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • プルダウンメニューをフレームをまたいで表示させたい。

    http://www.microsoft.com/japan/ms.htm このサイト(マイクロソフト)にあるようなプルダウンメニューを 上下分割フレームをまたいで表示させたいのです。 使用OS：WindowsNT4.0WS 使用ブラウザ：NN4.7 なんとかネスケ4.7で表示したいのです！ なにとぞよろしくお願いしますm(_ _)m

  • ｆｌash画像に隠れてしまうプルダウンメニュー

    cssで作成したプルダウンメニューがflash画像の後ろに隠れてしまいます。 マウスON時にプルダウンされるメニューをCSSで作成しましたが、 プルダウンメニューの下に配置している画像が、 ただの画像（GIF）だとプルダウンメニューが前に表示されるのですが、 フラッシュ（SWF）だとプルダウンメニューが後ろに隠れてしまい表示されません。 ・プルダウンメニューを前に表示させる方法 もしくは、 ・フラッシュ画像を後ろに隠す？方法 を探しています。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • HPのプルダウンについて

    http://www.statravel.co.uk/flights.asp ↑このサイトのようにコンテンツ自体をセンター揃えにしたプルダウンを作成しています。 しかし、ネットスケープではうまくプルダウンを機能させることができません。 マウスオーバーしてプルダウンメニューをクリックしようとするとメニューが消えてしまいます。 どこかのサイトを参考にしたいのですが、ちゃんとIEでもネットスケープでも機能しているサイトを知っていれば教えてください。 もちろんフラッシュを使うことは考えていません。 4月1日UP予定なのでとても困っています。 よろしくお願いします。

  • プルダウンメニューのフォントが読みづらいです。

    マイクロソフトのWEBページ全般でプルダウンメニューの日本語が太字斜体になっていて読みづらいです。 http://www.microsoft.com/downloads/search.aspxlangid=13&displaylang=ja このページの「製品/テクノロジ (オプション)」の プルダウンメニューの下部にある「コンバットフライトシュミレータ」等の文字が太字斜体になってしまいます。 フォントがインストールされていないのでしょうか？ よろしくお願いいたします。

  • プルダウンメニューに画像を使いたい

    画像（アイコン）にロールオーバーするとプルダウンメニューが表示される方法を探しています。全てテキス トで作る方法はいくつか分かったのですが、最初のボタン部分が画像でできているものが見つからず困っています。よろしくお願いします。

  • プルダウンメニューの方法

    いつもお世話になります。 http://203pj.com/design/index.html のサイトのメニューで「デザイン」や「オール電化・エコ」の部分にマウスオーバーするとでるプルダウンですが、FLASHではないようですし、どのような仕組みのものでしょうか？ javasacriptは得意ではないので、javasacriptならどのようなものか、もしくはサンプル等があれば教えていただきたいです。

  • 画像のオンオフ（表示／不表示）

    メニューの部分で →トップ（マウスオーバー） 　日記 　写真 　掲示板 ・矢印は画像でメニュー項目は文字 ・テーブルは組まないようにしたい ・矢印の画像は全項目共通 上記のようにメニューにマウスが乗った時に、画像の矢印を表示させ、マウスアウトで不表示にしたいです。矢印画像と空白画像の切り換えも考えたのですが、単純に表示/不表示の切り換えでできないかなと考えましたが、そのコードがうまく考え付きません。visibilityとか使うのかな？？う～ん？？ このサイトやGoogleで検索しましたが、（単純すぎるのか？）見つけることができませんでした。 できればシンプルなコードをご教授いただければと思います。よろしくお願い致します。

  • プルダウンメニューとフェードインの組み合わせを作りたい／FLASH?C

    プルダウンメニューとフェードインの組み合わせを作りたい／FLASH?CSS? お世話になっております。 添付画像の通り、フェードイン画像のFLASHの上にプルダウンメニューを設置したいと考えています。 フェードインだけならFLASHで問題なく作れそうなのですが、困っているのはプルダウンメニューです。 元々FLASHはあまり知識がないので、CSSなどで作ろうと思っておりました。 以前、以下のサイト様のサンプルを参考にさせていただき作った経験はあります。 http://css-eblog.com/csstechnique/css-8.html ですが、今回はこのプルダウンと同時にボタンにマウスオーバーした際、プルダウンが出るだけでなく、オーバー画像を変化させたいのです（添付画像の通り、通常時オレンジボタン→オーバー時黄色ボタン）。それが上記のCSSでどうすればいいのか分からず、もはやFLASHで作ったほうが良いのではと考えています。 その場合、プルダウンメニューのFLASHとフェードインのFLASHは別に作るべきなのでしょうか？ プルダウンメニューがFLASHにかかるように（画像参照）したいので、全てを一つのFLASHにするしかないのかと悩んでいます。 非常に基本的なことかもしれませんが、プルダウンのようなアクションスクリプトを使ったものと、フェードインのようにタイムラインに沿って動かすものを1つのFLASHで実現できるのでしょうか？ それとも、最初に挙げたCSSに手を加えればCSSのみでプルダウンを実現できるのでしょうか？ もう何を使って何から作ればいいかすら分かりません。 どんな小さいことでもありがたいので、ヒントいただけましたら幸いです。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • Flash
  • CSSでプルダウンメニューを作りたい

    お世話になります。 画像にマウスオーバーすると下にプルダウンでメニューが出るボタンを作りたいです。下記を希望のサイズやカラーにカスタマイズさせていただき、プルダウン自体はできました。 http://www.stylish-style.com/csstec/ultimate/css-roll-4.html しかし、今回私が作りたいのは A=プルダウンメニューが出ない B～E=プルダウンメニューが出る と、プルダウンの有無が混ざったボタンを横に並べる形です。 上記URLに書かれている方法ですとB～Eは問題なく並ぶのですが、Bの前にA画像を<li>タグで挿入するとAとBの間で改行されてしまいます。 どうしたら横にきちんと並ぶのでしょうか？ ちなみにulの横幅は希望のものに合わせました。 CSSではなくjavascriptでないと無理なのでしょうか？ どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する