尝试把一个表格实现的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'">
<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" /> <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'">
<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" /> <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'">
<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />
<a href='<%= ResolveUrl("~/Default1.aspx") %>'>
Hyperlink1</a>
</div>
<div id="div_menu" onmouseover="this.style.backgroundColor='faf0e6'" onmouseout="this.style.backgroundColor='dcdcdc'">
<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />
<a href='<%= ResolveUrl("~/Default2.aspx") %>'>
Hyperlink2</a>
</div>
<div id="div_menu" onmouseover="this.style.backgroundColor='faf0e6'" onmouseout="this.style.backgroundColor='dcdcdc'">
<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" /> <a
href='<%= ResolveUrl("~/Default3.aspx") %>'>Hyperlink3</a>
</div>
<div id="div_menu" onmouseover="this.style.backgroundColor='faf0e6'" onmouseout="this.style.backgroundColor='dcdcdc'">
<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />
<a href='<%= ResolveUrl("~/Default4.aspx") %>'>
Hyperlink4</a>
</div>
<div id="div_menu" onmouseover="this.style.backgroundColor='faf0e6'" onmouseout="this.style.backgroundColor='dcdcdc'">
<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" /> <a
href='<%= ResolveUrl("~/Default5.aspx") %>'>Hyperlink5</a>
</div>
共同学习,写下你的评论
评论加载中...
作者其他优质文章