คลิกขวาในเว็บ เพื่อดูตัวอย่างผลลัพธ์ สามารถนำไปประยุกต์ได้
CSS Code
<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
<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
<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>
<li><a href="http://www.google.com" target="_blank">Google.com</a></li>
</ul>
คลิกขวาในเว็บ เพื่อดูตัวอย่างผลลัพธ์ สามารถนำไปประยุกต์ได้
