|
Learn Java Script Today | | | Over 5000 Free Fonts | | | Tutorials | | | Javascript Forum | | | Other Javascript Resources | | | Cheat Sheet |
Popup MenuIE5 introduced a new event called First you have to include the javascript and style sheet files. <link type="text/css" rel="stylesheet" href="menu.css"> <script type="text/javascript" src="menu3.js"></script> Note that you also need the file menuContainer.html in the same directory (or you have to change the path inside menu3.js) as the current page and that menuContainer.html also needs to be in the same directory as menu.css (or you'll have to change this file as well). Below is the table that defines the popup menu <table cellspacing="0" class="menu" id="popupMenu"> <tr id="anchorItem"> <td></td> <td>Open link</td> <td></td> </tr> <tr class="disabled" id="anchorSeparator"> <td colspan="3" style="height: 10px; padding: 0;"> <div style="border: 1px inset ; height: 2; overflow: hidden;"> </div></td> </tr> <tr href="javascript:history.back()"> <td class="icon"><img src="../../images/arrowleft.gif"></td> <td>Back</td> <td></td> </tr> <tr href="javascript:history.forward()"> <td class="icon"><img src="../../images/arrowright.gif"></td> <td>Forward</td> <td></td> </tr> <tr href="/index.htm"> <td class="icon"><img src="../../images/favicon.gif"></td> <td style="font-weight: bold;">WebFX Home</td> <td></td> </tr> <tr class="disabled"> <td colspan="3" style="height: 10px; padding: 0;"> <div style="border: 1px inset ; height: 2; overflow: hidden;"> </div></td> </tr> <tr id="sourceItem"> <td class="icon"><img src="../../images/notepad.gif"></td> <td>View Source</td> <td></td> </tr> </table>
Then we need to define a function to call when the event fires and assign this as an event handler. function showPopupMenu() { customizePopup(); hideAllMenuScriptlets(); // Note how the Boundaries object is initiated showMenu(popupMenu, new Boundaries (event.clientX + document.body.scrollLeft, event.clientY + document.body.scrollTop)); window.event.returnValue = false; // disable the standard popup } document.oncontextmenu = showPopupMenu; I've also made the popup a bit dynamic. Every time the popup is called the function function customizePopup() { sourceItem.href = "view-source:" + window.location; // Returns the first parent with the tagName A var aEl = getParent(event.srcElement, function(el) {return el.tagName == "A";}); if (aEl == null) { anchorItem.style.display = "none"; anchorSeparator.style.display = "none"; forceRebuild(popupMenu); } else { anchorItem.style.display = "block"; anchorSeparator.style.display = "block"; forceRebuild(popupMenu); } } Next I will show you how to create a menu bar at the top and have an iframe below.
|
|