ตัวอย่างการใช้งาน
เลื่อนเม๊าท์มาตำแหน่งนี้CSS Code ตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <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 ตัวอย่าง
1 2 3 4 5 6 7 8 9 10 | <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> </ul> เลื่อนเม๊าท์มาตำแหน่งนี้ <span id="showmenu1" style="text-decoration:underline;color:#0066FF;">เมนู</span> |
Javascript Code ตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <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> |
