Div Vertical Menu

尝试把一个表格实现的Vertical菜单，改用div来实现。

原代码如下：

Vertical Menu by Table

< table  cellpadding ="5"  cellspacing ="1"  width ="100%"  border ="0" >
     < tr >
         < td  bgcolor ="white"  height ="3px" >
         </ td >
     </ tr >
     < tr >
         < td  height ="15px"  bgcolor ="#dcdcdc"  onmouseover ="this.style.backgroundColor='faf0e6'"
            onmouseout ="this.style.backgroundColor='dcdcdc'" >
             &nbsp;&nbsp; < img  src ='<%=  ResolveUrl("~/link.gif")% >' align="absmiddle" /> &nbsp;&nbsp; < asp:HyperLink
                 ID ="HyperLink1"  runat ="server"  Text ="Hperlink1"  NavigateUrl ="~/Default1.aspx"
                 ></ asp:HyperLink >
         </ td >
     </ tr >
     < tr >
         < td  bgcolor ="white"  height ="1px" >
         </ td >
     </ tr >  
       < tr >
         < td  height ="15px"  bgcolor ="#dcdcdc"  onmouseover ="this.style.backgroundColor='faf0e6'"
            onmouseout ="this.style.backgroundColor='dcdcdc'" >
             &nbsp;&nbsp; < img  src ='<%=  ResolveUrl("~/link.gif")% >' align="absmiddle" /> &nbsp;&nbsp; < asp:HyperLink
                 ID ="HyperLink2"  runat ="server"  Text ="Hperlink2"  NavigateUrl ="~/Default2.aspx"
                 ></ asp:HyperLink >
         </ td >
     </ tr >
     < tr >
         < td  bgcolor ="white"  height ="1px" >
         </ td >
     </ tr >  
</ table >

 

使用Div tag来实现vertical菜单，首先来看看效果：

 

为菜单设置样式：

Div Menu Style

 #div_menu
    {
        margin-top:  2px;
        margin-bottom:  2px;
        padding:  5px;
        background-color:  #dcdcdc;
        height:  16px;
    }   

 

菜单：

Menu

< div  style ="background-color: #FFFFFF; height: 3px;" >
</ div >
< div  id ="div_menu"  onmouseover ="this.style.backgroundColor='faf0e6'"  onmouseout ="this.style.backgroundColor='dcdcdc'" >
     &nbsp;&nbsp; < img  src ='<%=  ResolveUrl("~/link.gif")% >' align="absmiddle" /> &nbsp;&nbsp;
     < a  href ='<%=  ResolveUrl("~/Default1.aspx") % >'>
        Hyperlink1 </ a >
</ div >
< div  id ="div_menu"  onmouseover ="this.style.backgroundColor='faf0e6'"  onmouseout ="this.style.backgroundColor='dcdcdc'" >
     &nbsp;&nbsp; < img  src ='<%=  ResolveUrl("~/link.gif")% >' align="absmiddle" /> &nbsp;&nbsp;
     < a  href ='<%=  ResolveUrl("~/Default2.aspx") % >'>
        Hyperlink2 </ a >
</ div >
< div  id ="div_menu"  onmouseover ="this.style.backgroundColor='faf0e6'"  onmouseout ="this.style.backgroundColor='dcdcdc'" >
     &nbsp;&nbsp; < img  src ='<%=  ResolveUrl("~/link.gif")% >' align="absmiddle" /> &nbsp;&nbsp; < a
         href ='<%=  ResolveUrl("~/Default3.aspx") % >'>Hyperlink3 </ a >
</ div >
< div  id ="div_menu"  onmouseover ="this.style.backgroundColor='faf0e6'"  onmouseout ="this.style.backgroundColor='dcdcdc'" >
     &nbsp;&nbsp; < img  src ='<%=  ResolveUrl("~/link.gif")% >' align="absmiddle" /> &nbsp;&nbsp;
     < a  href ='<%=  ResolveUrl("~/Default4.aspx") % >'>
        Hyperlink4 </ a >
</ div >
< div  id ="div_menu"  onmouseover ="this.style.backgroundColor='faf0e6'"  onmouseout ="this.style.backgroundColor='dcdcdc'" >
     &nbsp;&nbsp; < img  src ='<%=  ResolveUrl("~/link.gif")% >' align="absmiddle" /> &nbsp;&nbsp; < a
         href ='<%=  ResolveUrl("~/Default5.aspx") % >'>Hyperlink5 </ a >
</ div >