动态菜单 javascript onmouseover onmouseout

 实际上是两种方法，一种是ajaxpro返回一个arraylist  另一个是通过在后台写javascript 得出一个array

因为加了ajaxpro会不能显示flash（害我找了好久才找到是这个原因）所以写了后面这个方法，

前台  .ascx

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="SctU.Modules.UC.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>

<script language=javascript>

 function Getcate(cate,obj)
 {
  var index = cate - 1;
  /*
  alert(index);
  //alert(arrParent[cate]);
  for(i = 0; i < arrParent.length; i ++){
   if(i == index){
    var charr = arrParent[index];   
    if(charr != null){
     for(j = 0; j < charr.length; j ++){
      var ccarr = charr[j];
      if(ccarr != null){
       for(k = 0; k < ccarr.length; k ++){
        alert(ccarr[k]);
       }
      }
     }
    }
   }
  }
  */
  
  //var charr = arrParent[index];
        var tipdiv = document.getElementById("pop");
  var arr = new Array();
  arr = arrParent[index];//SctU.Modules.UC.left.GetthisCate(cate).value;
  
  var inSpan = obj.getElementsByTagName("SPAN"); 
  // alert(inSpan[0]);
  if(arr != null)
  { 
   //alert(arr.length);
   var str = "";
   for(i=0;i<arr.length;i++)
   {    
    var newarr = arr[i];
    //var b=i;
     
    str +="<li  ><a href=/"../Products/index.aspx?dno="+newarr[1]+"/">"+newarr[0]+"</a>/n" ;
    //i=b;
   }
   if(arr.length != 0){
    
     tipdiv.innerHTML="<ul>" + str + "</ul>";
    //alert(document.getElementById("pop").innerHTML)
     tipdiv.onmouseout = function ()
     {
      tipdiv.style.display = "none";
     }
     tipdiv.onmouseover = function ()
     {
      tipdiv.style.display = "block";
     }
    Show(obj);
   }
     
  }
  
  
 }
 </script>
  <script   language='javascript'>  
  function   Show(tt)  
  {  
      var   daps     =   document.all.pop.style;  
      var   ttop     =   tt.offsetTop;           
      var   thei     =   tt.clientHeight;    
      var   tleft   =   tt.offsetLeft;          
      var   ttyp     =   tt.type;
      var aa = tt.offsetWidth; //LI 的寬度
      //alert(aa);                      
      while   (tt   =   tt.offsetParent){ttop+=tt.offsetTop;   tleft+=tt.offsetLeft;}  
      daps.top     =   (ttyp=="image")?   ttop  :   ttop;    
      daps.left   =   tleft   + 1+ aa;
         
      daps.display   =   ""; 
       
  }  
  </script> 
    <script  language=javascript>  
  function   Out()  
  {  
      document.getElementById("pop").style.display = "none"; 
  }  
  </script> 
<table width="229" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
  <td width="229"><!-----------------  meun_start --------------------->
   <div class="meun_div">
    <ul id="nav">
     <li οnmοuseοver="Getcate(1,this)"   οnmοuseοut="Out()">
      <a href="../products/index.aspx?cno=1">Bags &amp; Leather</a><span></span>
     <li οnmοuseοver="Getcate(2, this)" οnmοuseοut="Out()">
      <a href="../Products/index.aspx?cno=2">Toys &amp; Sporting goods</a><span></span>
     <li οnmοuseοver="Getcate(3,this)" οnmοuseοut="Out()">
      <a href="../products/index.aspx?cno=3">Paper</a><span></span>
     <li οnmοuseοver="Getcate(4,this)" οnmοuseοut="Out()">
      <a href="../products/index.aspx?cno=4">Premium gift</a><span></span>
     <li οnmοuseοver="Getcate(5,this)" οnmοuseοut="Out()">
      <a href="../products/index.aspx?cno=5">Textile &amp; Garment</a><span></span>
     <li οnmοuseοver="Getcate(6,this)" οnmοuseοut="Out()">
      <a href="../products/index.aspx?cno=6">Lighting &amp; Furniture</a><span></span>
     <li οnmοuseοver="Getcate(7,this)" οnmοuseοut="Out()">
      <a href="../products/index.aspx?cno=7">Electronics &amp; PC</a><span></span></li>
    </ul>
   </div>
   <!------------------- meun_end ---------------------->
  </td>
 </tr>
 <tr>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td><a href="flash_zm/vol1.rar"><img src="../../images/home/e-catalogue.gif" width="229" height="88" border="0"></a></td>
 </tr>
 <tr>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td><img src="../../images/home/contant1.gif" width="229" height="51"></td>
 </tr>
 <tr>
  <td height="25" background="../../images/home/contant2.gif"><div class="con_in">Tel:
    +86-20-81376215</div>
  </td>
 </tr>
 <tr>
  <td height="8"><img src="../../images/home/contant3.gif" width="229" height="8"></td>
 </tr>
 <tr>
  <td height="25" background="../../images/home/contant2.gif"><div class="con_in">Fax:
    +86-20-81376483</div>
  </td>
 </tr>
 <tr>
  <td height="8"><img src="../../images/home/contant5.gif" width="229" height="8"></td>
 </tr>
 <tr>
  <td height="25" background="../../images/home/contant4.gif">&nbsp;</td>
 </tr>
 <tr>
  <td height="7"><img src="../../images/home/contant7.gif" width="229" height="7"></td>
 </tr>
 <tr>
  <td height="25" background="../../images/home/contant8.gif"><div class="con_in"><a href="mailto:sales@silvercity.com.cn">sales@silvercity.com.cn</a></div>
  </td>
 </tr>
 <tr>
  <td><img src="../../images/home/contant9.gif" width="229" height="18"></td>
 </tr>
</table>
<div   id=pop   style="DISPLAY:none;Z-INDEX:99;WIDTH:100px;POSITION:absolute;HEIGHT:50px"></div>

<!--<div style="width:300;height:200px;backgrounf:url(../images/read_img/01_pattern.jpg)"><img src="D:/box2.png"/></div>-->

 

 

后台

 

namespace SctU.Modules.UC
{
 using System;
 using System.Data;
 using System.Drawing;
 using System.Web;
 using System.Web.UI.WebControls;
 using System.Web.UI.HtmlControls;
 using AjaxPro;
 using System.Collections;
 using MyConfig;
    using Microsoft.ApplicationBlocks.Data;
 using System.Data.SqlClient;
 using System.Text;

 /// <summary>
 ///  left 的摘要描述。
 /// </summary>
 public class left : System.Web.UI.UserControl
 {

  protected static ArrayList menuArr;
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在這裡放置使用者程式碼以初始化網頁
   
   //AjaxPro.Utility.RegisterTypeForAjax(typeof(left));
   if(!IsPostBack)
   {
     GetthisCate();
   }
  }

  #region Web Form 設計工具產生的程式碼
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 此為 ASP.NET Web Form 設計工具所需的呼叫。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  ///  此為設計工具支援所必須的方法 - 請勿使用程式碼編輯器修改
  ///  這個方法的內容。
  /// </summary>
  private void InitializeComponent()
  {
   this.Load += new System.EventHandler(this.Page_Load);
  }
  #endregion

  public void GetthisCate()
  {
   
   ArrayList arrParent = new ArrayList();

   StringBuilder script = new StringBuilder();
   script.Append("<script language='javascript' charset='utf-8'> /n");
   script.Append(" var arrParent = new Array(); /n");
   script.Append(" var arrtmp = new Array(); /n");
   script.Append(" var arrtmp2 = new Array(); /n");

   string SQLParent =  "select * from ss_Item_category0";
   SqlDataReader readerParent;
   readerParent = SqlHelper.ExecuteReader(MyConfig.MyConfigSectionHandler.ConnectionString,CommandType.Text,SQLParent);
   int j = 0;
   while(readerParent.Read())
   {
                 script.Append("  arrtmp = new Array(); /n");
    //arrParent.Add(readerParent["SN"].ToString());
    string SQL = "select * from  ss_Item_category where ParentCat='"+readerParent["SN"].ToString()+"'";
    SqlDataReader reader;
    reader = SqlHelper.ExecuteReader(MyConfig.MyConfigSectionHandler.ConnectionString,CommandType.Text,SQL);
    ArrayList thisarr = new ArrayList();
    int i = 0;
    while(reader.Read())
    {
     script.Append("  arrtmp2 = new Array(); /n");
     script.Append(" arrtmp2[0] = '"+reader["CatName"].ToString()+"'; /n");
     script.Append(" arrtmp2[1] = '"+reader["CatNo"].ToString()+"'; /n");
     script.Append(" arrtmp["+i.ToString()+"] = arrtmp2; /n");
     i ++;
     
    }
    script.Append(" arrParent["+j.ToString()+"] = arrtmp; /n");
    j ++;
    reader.Close();
   }
   script.Append("</script> /n");
   readerParent.Close();
   Page.RegisterStartupScript("a",script.ToString());
  }
//  [AjaxPro.AjaxMethod()]
//  public ArrayList GetthisCate(string cate)
//  {
//   ArrayList thisarr = new ArrayList();
//   string SQL = "select * from  ss_Item_category where ParentCat='"+cate+"'";
//   SqlDataReader reader;
//   reader = SqlHelper.ExecuteReader(MyConfig.MyConfigSectionHandler.ConnectionString,CommandType.Text,SQL);
//   while(reader.Read())
//   {
//    thisarr.Add(reader["CatName"].ToString());
//    thisarr.Add(reader["CatNo"].ToString());
//   }
//   reader.Close();
//   return thisarr;
//  }
 }
}

 

CSS

body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 font-size: 13px;
 color: #333333;
}

table {border-collapse:collapse;}

a:link {
 text-decoration: none;
 color: #000;
}
a:visited {
 text-decoration: none;
 color: #000;
}
a:hover {
 text-decoration: none;
 color: #000;
}
a:active {
 text-decoration: none;
 color: #000;
}

/**************************pop**************/

#pop
{
 font-size:9pt;
}
#pop ul li
{
 font-size:10pt;
}

/*---------------- login --------------------*/
.login_in{
 padding-left: 55px;
 padding-right:20px;
}

.login_di{
 padding-left: 8px;
 padding-top:10px;
}

.login_textbox{
 width:150px;
 border: 1px solid #985F92;
 padding-left:2px;
 text-indent: 3px;
}

.login_text{
 font-size: 15px;
 color: #333333;
 font-weight: bold;
}

 

/*------------------  index ------------------*/
.top1{
 width:1010px;
 height:1px;
 background-color:#985f92;}

.search_form_top{
 text-align:left;
 padding:0px;
 margin:0 auto;
 border:0;}

.search_top{
 width:180px;
 border: 1px solid #985F92;
 }
 

/*-------------------  index_contant ----------------------*/
.con_in{
 padding-left:61px;
 font-size: 14px;
 font-weight: bold;
 }

 

/*------------------------ index_buttom -----------------------------*/
.in_di{
 width:600px;}

 

/*------------------------------- index_main ----------------------------------*/
.main_kuang{
 margin-right:5px;
 border-left-width: 1px;
 border-left-style: solid;
 border-left-color: #333333;
 }

.salse{
 font-size: 14px;
 font-weight: bold;
 color: #CC6600;
 letter-spacing: 2px;
 }

.in_pro{
 border: 1px solid #999999;
 }

.in_proa{
 border-top-width: 1px;
 border-top-style: dashed;
 border-top-color: #666666;
 line-height: 25px;
 background-color: #EAEAEA;
 font-size: 14px;
 }

/*-------------------- about ------------------*/
.text_a 
 {
 font-size: 16px;
 font-weight: bold;
 text-align: left;
 color: #CC6600;
}
.about{
 text-align:left;
 font-size:15px;
 letter-spacing: 1px;
 line-height: 20px;
}

 

/*---------------- index_meun -----------------*/ 
.meun_div{
 margin-left: 10px;
 font-size: 14px;
 font-weight: bold;
 letter-spacing: 1.5px;
}

ul {
 padding:0;
 list-style: none;
 width: 215px; /* Width of Menu Items */
 margin:0;
}

ul li {
position: relative;

}

li ul {
position: absolute;
left: 215px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
 display: block;
 text-decoration: none;
 color: #FFFFFF; /* IE6 Bug */
 border-bottom: 0;
 background-image: url(../images/left_menu.gif);
 background-repeat: no-repeat;
 background-position: center;
 line-height: 28px;
 text-indent: 25px;
}

/* Holly Hack. IE Requirement /*/
* html ul li {
 float: left;
 height:1%;
}
 
* html ul li a {
 height: 1%;
}
/* End */

*html ul li a:hover {
 background-image: url(../images/left_menu1.gif);
 background-repeat: no-repeat;
 background-position: center;
 color: #FFFFFF;
}

li:hover ul, li.over ul {
 display: block;
} /* The magic */

 

/***    footer***/
#footer
{
 font-size:9pt;
 
}
#footer table tr td
{
 font-size:9pt;
}
/***    footer***/
/*****pager***************/

#pager
{
 font-size:9pt;
 text-align:center;
}
#pager table tr td
{
 text-align:center;
 font-size:10pt;
}