สร้างเมนูย่อย ให้กับข้อความ เมื่อนำเม๊าท์ไปชี้ mouseover ด้วย css และ jquery อย่างง่าย
04 June 2009 By Ninenik Narkdeeข้อความ mouseover jquery เมนูย่อย css
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ข้อความ mouseover jquery เมนูย่อย css
ไปที่
Copy
ตัวอย่างการใช้งาน
เลื่อนเม๊าท์มาตำแหน่งนี้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 เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ

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