PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

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

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


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





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







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