PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

04 June 2009 By
เมนูย่อย mouseover css jquery ข้อความ

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ เมนูย่อย 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>






Tags:: css เมนูย่อย mouseover jquery ข้อความ






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง