Ukryte menu - Menu pojawia się po kliknięciu na stronie prawym klawiszem myszy
Menu pojawia się po kliknięciu na stronie prawym klawiszem myszy.Skrypt działa tylko w IE 5 i nowszym.
W sekcji head wstaw:
| <style> <!-- .skin0{ position:absolute; width:200px; border:2px solid black; background-color:menu; font-family:Verdana; line-height:20px; cursor:default; visibility:hidden; } .skin1{ cursor: default; font: menutext; position: absolute; width: 165px; background-color: menu; border: 1 solid buttonface; visibility:hidden; border: 2 outset buttonhighlight; } .menuitems{ padding-left:15px; padding-right:10px; } --> </style> <script language="JavaScript1.2"> //set the skin of the menu (0 or 1, with 1 rendering a default Windows menu like skin) var menuskin=1 //set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar var display_url=0 function showmenuie5(){ //Find out how close the mouse is to the corner of the window var rightedge=document.body.clientWidth-event.clientX var bottomedge=document.body.clientHeight-event.clientY //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<ie5menu.offsetWidth) //move the horizontal position of the menu to the left by it's width ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth else //position the horizontal position of the menu where the mouse was clicked ie5menu.style.left=document.body.scrollLeft+event.clientX //same concept with the vertical position if (bottomedge<ie5menu.offsetHeight) ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight else ie5menu.style.top=document.body.scrollTop+event.clientY 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="" event.srcElement.style.color="black" window.status='' } } function jumptoie5(){ if (event.srcElement.className=="menuitems"){ if (event.srcElement.getAttribute("target")!=null) window.open(event.srcElement.url,event.srcElement.getAttribute("target")) else window.location=event.srcElement.url } } </script> |
W sekcji body wstaw:
| <!--[if IE]> <div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()"> <div class="menuitems" url="http://www.onet.pl">Onet</div> <div class="menuitems" url="http://www.gazeta.pl/" target="newwin">Wyborcza</div> <div class="menuitems" url="http://www.gpw.com.pl/">GPW</div> <div class="menuitems" url="http://gielda.onet.pl/">Notowania giełdowe</div> <div class="menuitems" url="http://www.pap.com.pl/">PAP</div> <div class="menuitems" url="http://www.chip.pl/">Chip</div> <hr> <div class="menuitems" url="mailto:Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.">Email</div> </div> <![endif]--> <script language="JavaScript1.2"> if (document.all&&window.print){ if (menuskin==0) ie5menu.className="skin0" else ie5menu.className="skin1" document.oncontextmenu=showmenuie5 document.body.onclick=hidemenuie5 } </script> |