สร้างเมนูย่อย ให้กับข้อความ เมื่อนำเม๊าท์ไปชี้ mouseover ด้วย css และ jquery อย่างง่าย

ตัวอย่างการใช้งาน

CSS Code ตัวอย่าง

<style type="text/css">   
ul.v_menu{ /* กำหนดขอบเขตของเมนู */  
    list-style:none;   
    margin:0px;   
    padding:0px;   
    width:180px;   
   font-family:Arial, Helvetica, sans-serif;
    font-size:11px;   
   display:none;
    border:1px #CCCCCC solid;   	
}   
ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูเ */  
    display:block;   
    height:15px;    
    text-indent:5px;   
    background-color:#EAEAEA;   
    border:1px #FCFCFC solid;   
}   
ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */  
    display:block;   
    height:15px;   
    text-indent:5px;   
   color:#FFFFFF;
    background-color:#B6DFF8;   
    border:1px #FFFFFF groove;   
}   
ul.v_menu > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */  
    text-decoration:none;   
    color:#333333;   
   font-weight:bold;
}   
</style>

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>  
เลื่อนเม๊าท์มาตำแหน่งนี้ <span id="showmenu1" style="text-decoration:underline;color:#0066FF;">เมนู</span>

Javascript Code ตัวอย่าง

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript"> 
$(function(){
	$("span#showmenu1").mouseover(function(event){
		x=event.pageX;
		y=event.pageY;
		x-=5;
		y-=5;	
		$("ul.v_menu").css({
			position:"absolute",
			left:x,
			top:y
		});
		$("ul.v_menu").show();
	});
	$("ul.v_menu").hover(function(){
 
	},function(){
		$("ul.v_menu").hide();
	});
	$("ul.v_menu").click(function(){
		$("ul.v_menu").hide();	
	});	
});
</script>

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