プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：bluecafe117
  • 質問日時：
  • 回答数：3件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： ittochan
  • 回答日時：

右クリックの場合なんですが


↓これを綺麗にしたものだと思います。

<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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ryota2
  • 回答日時：

あれはJavaScriptで作ってあります。


画像じゃありません

この回答への補足

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

補足日時：2002/12/11 18:38
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： taknt
  • 回答日時：

プルダウン？



画像で作ったような・・・・
マイクロソフトのＨＰを見るときに画像の表示をオフにして見れば、
どれだけ画像が使われてるかすぐわかりますよ。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報