สร้างคลิกขวาเมนูในเว็บด้วย CSS + jQuery อย่างง่ายดาย

คลิกขวาในเว็บ เพื่อดูตัวอย่างผลลัพธ์ สามารถนำไปประยุกต์ได้

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>  

คลิกขวาในเว็บ เพื่อดูตัวอย่างผลลัพธ์ สามารถนำไปประยุกต์ได้

• PHP Learning
• AJAX Learning
• Javascript Learning
• CSS Learning
• MySQL Learning
• jQuery Learning
• Google.com