ตัวอย่างการใช้งาน
เลื่อนเม๊าท์มาตำแหน่งนี้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>
