PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

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


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

เลื่อนเม๊าท์มาตำแหน่งนี้ เมนู

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 ข้อความ jquery mouseover






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


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