คลิกขวาในเว็บ เพื่อดูตัวอย่างผลลัพธ์ สามารถนำไปประยุกต์ได้
CSS Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <style type="text/css"> ul.v_menu{ /* กำหนดขอบเขตของเมนู */ list-style:none; margin:0px; padding:0px; width:180px; font-family:tahoma, "Microsoft Sans Serif", Vanessa; font-size:12px; display:none;} ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูเ */ display:block; height:20px; text-indent:5px; background-color:#000000; border:1px #999999 groove; } ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */ display:block; height:20px; text-indent:5px; background-color:#9AC305; border:1px #999999 groove; } ul.v_menu > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */ text-decoration:none; color:#FFFFFF; font-weight:bold; line-height:20px; } </style> |
Javascript Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <script language="javascript" src="js/jquery-1.2.6.min.js"></script><script type="text/javascript"> $(function(){$(document).bind("contextmenu",function(ev){ var ev=ev || window.event; var evTarget=ev.srcElement.tagName.toLowerCase(); var x,y; if (document.all) { if(evTarget=="input" || evTarget=="textarea") return; x=ev.clientX + document.body.scrollLeft; y=ev.clientY + document.body.scrollTop; }else{ if(evTarget=="input" || evTarget=="textarea") return; x=ev.pageX; y=ev.pageY; } x-=15; y-=15; $("ul.v_menu").css({ position:"absolute", left:x, top:y }); $("ul.v_menu").show(); return false;}); $("ul.v_menu").hover(function(){ },function(){ $("ul.v_menu").hide(); }); $("ul.v_menu").click(function(){ $("ul.v_menu").hide(); }); });</script> |
HTML Code
1 2 3 4 5 6 7 8 9 | <ul class="v_menu"> <li><a href="#menu1">PHP Learning</a></li> <li><a href="#menu2">AJAX Learning</a></li> <li><a href="#menu3">Javascript Learning</a></li> <li><a href="#menu4">CSS Learning</a></li> <li><a href="#menu5">MySQL Learning</a></li> <li><a href="#menu6" target="_blank">jQuery Learning</a></li> </ul> |
คลิกขวาในเว็บ เพื่อดูตัวอย่างผลลัพธ์ สามารถนำไปประยุกต์ได้
