- ベストアンサー
画像表示のようなきれいなプルダウン
例えばマイクロソフトのサイト（http://www.microsoft.com/japan/）のトップメニューにあるように、マウスオーバで、画像で作ったようなきれいなプルダウンが開くのは、どうのように行っているのでしょうか？
- bluecafe117
- お礼率9% (3/33)
- その他（プログラミング・開発）
- 回答数3
- ありがとう数0
- みんなの回答 （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>
補足
JavaScriptは、ある程度はわかります。JavaScriptでどのようにして実現するのでしょうか？