jQuery 製作下拉選單

這個其實是一套常用到的選單如下

 

這支程式的原理是先用html建立一個會全部顯示的主選單及子選單,

用css設定子選單預設關閉當主選單被滑鼠移入時就會觸發顯示的動作。

顯示的同時將依照主選單的座標來控制子選單的位置。

html 部分:

<div id=\"main_link\">
  <div class=\"main\" id=\"a\">主選單1
   <p class=\"sub\">sub1<br/>sub1</p>
  </div>
  <div class=\"main\" id=\"b\">主選單2
   <p class=\"sub\">sub2<br/>sub2</p>
  </div>
 </div>
 
 <div id=\"con\">內容</div>

jQuery部分

<script type=\"text/javascript\">
 $(function(){

  
  $(\".main\").mouseenter(function(){
   var position = $(this).offset();  
   var x = position.left;
   var y = position.buttom ;
   $(\".sub\",this).slideDown();
   $(\".sub\").css(\"left\",x);
   $(\".sub\").css(\"top\",y);
  });
  $(\".main\").mouseleave(function(){
   $(\"p\",this).hide();
  });
  
 });
</script>

CSS部分

body{

 margin:0px;
 padding:0px;

}
#main_link{
 heigh:32px;
 line-height:32px;
 margin:20px;
}
.main{
ackground:#cccccc;
 heigh:32px;
 line-height:32px;
 float:left;
margin:0px;
 padding:0px;

}
.sub{
 background:#dfdfdf;
 position:absolute;
 left:0px;
 #top:52px;
 z-index:1;
 margin:0px;
 padding:0px;
 display:none;
}
#con{
 margin:0px;
 padding:0px;
 clear:both;
}