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"：

Div Menu Style

<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:

View Code

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

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

 

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

View Code

id="div ?"  class="div_menu" οnmοuseοver=" InsusOver(this)" οnmοuseοut=" InsusOut(this)">

 

完整代码：

Div Vertical Menu html

< 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 >