下载代码文件 web Page context menu (下载后请改名, 去掉.txt 扩展名);
<html><head>
<script language="javascript" type="text/javascript">
var g_popup = window.createPopup(); var html=""; html += '<TABLE id="popup_menu1" STYLE="background-color:menu;100px; height:70px; font-size:smaller;font-family:Calibri">'; html += '<TR ONMOUSEOVER="this.style.backgroundColor=\'highlight\';this.style.color=\'White\';" ONMOUSEOUT="this.style.backgroundColor=\'\';this.style.color=\'\';" STYLE="height:20px;cursor:pointer" >'; html += '<TD> <span id="before" STYLE="12px;"></span><A style="78px" name="before">Before</A></TD>'; html += '</TR>'; html += '<TR ONMOUSEOVER="this.style.backgroundColor=\'highlight\';this.style.color=\'White\';" ONMOUSEOUT="this.style.backgroundColor=\'\';this.style.color=\'\';" STYLE="height:20px;cursor:pointer" >'; html += ' <TD><span id="after" STYLE="12px;"></span><A style="78px" name="after">After</A></TD>'; html += '</TR>'; html += '<TR ONMOUSEOVER="this.style.backgroundColor=\'highlight\';this.style.color=\'White\';" ONMOUSEOUT="this.style.backgroundColor=\'\';this.style.color=\'\';" STYLE="height:20px;cursor:pointer" >'; html += ' <TD><span id="sub" STYLE="12px;"></span><A style="78px " name="sub">Sub Section</A></TD>'; html += '</TR>'; html += '</TABLE>'; var toid = null; var topa = null; var child = document.createElement("UL"); var fe = null; function showmenu(eml, a2, a3)
{ 
toid = eml; var popBody = g_popup.document.body; g_popup.document.body.innerHTML = html; popBody.style.border = "thin outset"; popBody.onclick = this.doClick; g_popup.show(event.screenX,event.screenY, 90, 70);
} function doClick() { var ev = this.document.parentWindow.event; var tag = ev.srcElement.tagName; if(tag == 'A') act = ev.srcElement.name; if(tag == 'SPAN') act = ev.srcElement.id; if(act ) doAction(act); } function doAction(act) { if( fe == null) { var re = document.getElementById("s9"); fe = re.cloneNode(true); fe.style.fontStyle = 'italic'; } var tp = document.getElementById(toid); //tp.insertAdjacentElement('beforeBegin', re); if (act== 'before') tp.insertAdjacentElement('beforeBegin', fe ); if (act== 'after') tp.insertAdjacentElement('afterEnd', fe ); if (act=='sub') { if(tp.children.length <2) tp.appendChild(child); tp.lastChild.appendChild(fe ); }
}</script> </head><body > <br> <br> <br><br> <div style="546px; height:527px; background-color:green; overflow:auto"> <ul> <li id="s1" ><span onclick="javascript:showmenu('s1','q1 question', '1')" style="cursor:pointer;">Section: s1 (Your health and fitness)</span> <ul> <li id="s2"><span class="psuedoLink" onclick="javascript:showmenu('s2','q1 question', '2')" style="cursor:pointer;">Question: q1 (Would you consider yourself a health and fitness enthusiast?)</span></li> <li id="s3"><span class="psuedoLink" onclick="javascript:showmenu('s3','q2 question', '2')" style="cursor:pointer;">Question: q2 (On average, how many times per week do you participate in a physical activity (such as working out, jogging, cycling, swimming, squash, football, etc.)? )</span></li> <li id="s4"><span class="psuedoLink" onclick="javascript:showmenu('s4','q3 question', '2')" style="cursor:pointer;">Question: q3 (Which of the following do you participated in at least 4 times per year (please check all that apply))</span></li> <li id="s5"><span class="psuedoLink" onclick="javascript:showmenu('s5','q4 question', '2')" style="cursor:pointer;">Question: q4 (Do you regularly read any sports or health related magazines?)</span></li> </ul> </li> <li id="s6"><span onclick="javascript:showmenu('s6','q5 question', '2')" style="cursor:pointer;">Section: section2 (Health and Fitness online)</span> <ul> <li id="s7"><span class="psuedoLink" onclick="javascript:showmenu('s7','q5 question', '2')" style="cursor:pointer;">Question: q5 (Do you visit sporting or health/fitness related web sites?)</span></li> <li id="s8"><span class="psuedoLink" onclick="javascript:showmenu('s8','q6 question', '2')" style="cursor:pointer;">Question: q6 (If yes to the previous question, what are you looking for at the site?)</span></li> <li id="s9" style="text-decoration:line-through; font-weight:bolder"><span style="font-weight:bold">Question: asdf (Have you ever purchased sporting goods through the internet?)</span></li> <li id="s10"><span class="psuedoLink" onclick="javascript:showmenu('s10','q8 question', '2')" style="cursor:pointer;">Question: q8 (If yes to previous question, what did you buy? Check all that apply:)</span></li> </ul> </li> <li id="s11"><span>Section: test (test survey)</span> <ul> <li id="s12"><span>Section: subtestsurvey (sub test survey)</span> <ul> <li id="s13"><span class="psuedoLink" onclick="javascript:showmenu('s13','Q9 question', '2')" style="cursor:pointer;">Question: Q9 (adf af saasf d fas fsdaf sa)</span></li> </ul> </li> <li id="s14"><span>Section: asdf (asdf)</span> <ul> <li id="s15"><span class="psuedoLink" onclick="javascript:showmenu('s15','asdfsd question', '2')" style="cursor:pointer;">Question: asdfsd (bbb)</span></li> </ul> </li> </ul> </li> </ul> </div> </body> </html>