右鍵選單

摘要:右鍵選單

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>