Div Vertical Menu ver2

参考前一篇http://www.cnblogs.com/insus/archive/2011/10/17/2215637.html，是将一个table格式的Vertical菜单，改为Div Vertical 菜单。

今天发现它有一些问题，就是div 的ID会有重复的error，另外onmouseover和onmouseout事件可以重构，简化代码。

故产生这修正篇。

css样式中，需要把ID选择器改为类选择器，"#div_menu"已经改为".div_menu"：

<style>   
    .div_menu
    {
        margin-top: 2px;
        margin-bottom: 2px;
        padding: 5px;
        padding-left: 20px;
        background-color: #dcdcdc;
        height: 16px;
    }  
</style>

 

为了重构onmouseover和onmouseout事件，因此Insus.NET写了段Javascript:

<script language="javascript">
    function InsusOver(id) {
        id.style.backgroundColor = '#faf0e6';        
    }

    function InsusOut(id) {
        id.style.backgroundColor = '#dcdcdc';
    }
</script>

 

下面是Div vertical 菜单Html代码，与第一篇比较，语法变化部分(red highlight)

id="div?" class="div_menu" onmouseover="InsusOver(this)" onmouseout="InsusOut(this)">

 

完整代码：

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