为了账号安全,请及时绑定邮箱和手机立即绑定

Div Vertical Menu

标签:
Html/CSS

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

原代码如下:

5acf07350001405b00110016.jpgVertical 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菜单,首先来看看效果:


 

为菜单设置样式:

5acf07350001405b00110016.jpgDiv Menu Style  #div_menu
    {
        margin-top: 2px;
        margin-bottom: 2px;
        padding: 5px;
        background-color: #dcdcdc;
        height: 16px;
    }  

 

菜单:

5acf07350001405b00110016.jpgMenu <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>

 

 

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消