摘要:右鍵選單
CSS語法
<style type="text/css"> A:link { color: #007500; text-decoration: none; } A:visited { color: #007500; text-decoration: none; } A:hover { color: #800080; text-decoration: none; } #ie5menu { BACKGROUND-COLOR: #d6e7e7; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; CURSOR: default; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; LINE-HEIGHT: 17px; POSITION: absolute; VISIBILITY: hidden; WIDTH: 120px} .menuitems { PADDING-LEFT: 15px; PADDING-RIGHT: 15px} </style>
JavaScript語法
<script type="text/javascript" language="JavaScript"> var display_url = 0 //顯示右鍵選單 function showmenuie5() { var menuWidth = 125; var menuHeight = 335; if (screen.availHeight >= (event.clientY + menuHeight) && screen.availWidth >= (event.clientX + menuWidth)) { ie5menu.style.left = event.clientX + 'px'; ie5menu.style.top = event.clientY + 'px'; } else if (screen.availHeight < (event.clientY + menuHeight) && screen.availWidth >= (event.clientX + menuWidth)) { ie5menu.style.left = event.clientX + 'px'; ie5menu.style.top = event.clientY - 183 + 'px'; } else if (screen.availHeight >= (event.clientY + menuHeight) && screen.availWidth < (event.clientX + menuWidth)) { ie5menu.style.left = screen.availWidth - 125 + 'px'; ie5menu.style.top = event.clientY + 'px'; } else { ie5menu.style.left = screen.availWidth - 125 + 'px'; ie5menu.style.top = event.clientY - 183 + 'px'; } ie5menu.style.visibility = "visible"//顯示選單 return false; } function hidemenuie5() { ie5menu.style.visibility = "hidden" //隱藏選單 } function highlightie5() { if (event.srcElement.className == "menuitems") { event.srcElement.style.backgroundColor = "highlight" //當顯示選單,並將滑鼠移到項目上將背景顏色改變 event.srcElement.style.color = "white"//當顯示選單,並將滑鼠移到項目上將字體顏色改變 if (display_url == 1) window.status = event.srcElement.url } } function lowlightie5() { if (event.srcElement.className == "menuitems") { event.srcElement.style.backgroundColor = "#D6E7E7" //當滑鼠移至別的項目或是移出選單時背景顏色恢復 event.srcElement.style.color = "black"//當滑鼠移至別的項目或是移出選單時字體顏色恢復 //window.status='' } } function jumptoie5() { if (event.srcElement.className == "menuitems") window.location = event.srcElement.url //取得觸發事件的網址 } document.oncontextmenu = showmenuie5 //委派滑鼠右鍵事件 //if (document.all && window.print) document.onclick = hidemenuie5 //委派滑鼠左鍵事件 </script>
HTML語法
<div id="ie5menu" onclick="jumptoie5();" onmouseout="lowlightie5();" style="visibility: hidden;" onmouseover="highlightie5();"> <div class="menuitems" url="http://www.ltyschool.edu.hk"> 劉德容紀念小學</div> <div class="menuitems" url="http://www.yahoo.com.hk"> Yahoo</div> <div class="menuitems" url="http://www.sina.com.hk"> 新浪網</div> <hr /> <div class="menuitems" url="javascript:history.go(-1)"> 上 一 頁</div> <div class="menuitems" url="javascript:history.go(1)"> 下 一 頁</div> <div class="menuitems" url="www.yahoo.com.hk"> 回到首頁</div> <div class="menuitems" url="mailto:ltytss@yahoo.com.hk"> 寫信給我</div> <div class="menuitems" url="javascript:print()"> 列印本頁</div> <div class="menuitems" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.ltyschool.edu.hk');" url="javascript:history.go(0)"> 設為首頁</div> <div class="menuitems" onclick="window.external.addFavorite('http://www.ltyschool.edu.hk','劉德容紀念小學') ;" url="javascript:history.go(0)"> 加入我的最愛</div> </div>