asp2.0 中实现 msdn 左边导航栏

 

<% @ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default"  %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  id ="Head1"   runat =server  >
     < title > Untitled Page </ title >
    
     < script >
     function change()
     { 
      
       var divs= document.getElementsByTagName("div")
        for (var k=0;k<divs.length;k++)
        {  
                var flag=divs[k].id+"";
                var flagarray=new Array();
                    flagarray=flag;
                if ((flag.substring(0,15)=="NavigationMenun")&&(flag.length==21) )
                   
                 { alert(divs[k].id);
                    var tables=divs[k].getElementsByTagName("table");
                    var select=tables[0];
                    select.style.borderColor="#9C9A9C";
                    select.style.borderWidth="1px";
                    select.style.borderStyle="Solid";
                    select.style.width="160";
                 }
        }
      
      
          }
          
         
     </ script >

</ head >
< body  onload ="change()" >
     < form  id ="form1"  runat ="server"   >
   
     < div >
        < asp:menu  id ="NavigationMenu"
        disappearafter ="2000"
        staticdisplaylevels ="2"
        staticsubmenuindent ="10"  
        orientation ="Vertical"
        font-names ="Arial"  
        target ="_blank"   
        runat ="server"  style ="background-color: #f7f3f7; border-right: #9c9a9c 1px solid; border-top: #9c9a9c 1px solid; border-left: #9c9a9c 1px double; border-bottom: #9c9a9c 1px solid;"  Height ="13px"  Width ="191px" >
        
         < staticmenuitemstyle  backcolor ="#F7F3F7"
          forecolor =Black  />
         < statichoverstyle  backcolor ="#CECFCE"  BorderStyle =Solid   BorderWidth =1px  BorderColor ="#9C9A9C"  ForeColor =Black />
         < dynamicmenuitemstyle  backcolor ="#F7F3F7"
          forecolor =Black     />
         < dynamichoverstyle  backcolor ="#CECFCE"
          forecolor ="Black"   BorderStyle =Solid   BorderWidth =1px  BorderColor ="#9C9A9C" />

         < items >
           < asp:menuitem  navigateurl ="Home.aspx"  
            text ="中国"
            tooltip ="Home"  Value ="Home"   >
             < asp:menuitem  navigateurl ="Music.aspx"
              text ="Music"
              tooltip ="Music"  Value ="Music" >
               < asp:menuitem  navigateurl ="Classical.aspx"  
                text ="Classical"
                tooltip ="Classical"  Value ="Classical" />
               < asp:menuitem  navigateurl ="Rock.aspx"
                text ="Rock"
                tooltip ="Rock"  Value ="Rock" />
               < asp:menuitem  navigateurl ="Jazz.aspx"
                text ="Jazz"
                tooltip ="Jazz"  Value ="Jazz" />
             </ asp:menuitem >
             < asp:menuitem  navigateurl ="Movies.aspx"
              text ="Movies"
              tooltip ="Movies"  Value ="Movies" >
               < asp:menuitem  navigateurl ="Action.aspx"
                text ="Action"
                tooltip ="Action"  Value ="Action" />
               < asp:menuitem  navigateurl ="Drama.aspx"
                text ="Drama"
                tooltip ="Drama"  Value ="Drama" />
               < asp:menuitem  navigateurl ="Musical.aspx"
                text ="Musical"
                tooltip ="Musical"  Value ="Musical" />
             </ asp:menuitem >
           </ asp:menuitem >
         </ items >
      
       </ asp:menu >

         &nbsp;&nbsp;&nbsp;
     </ div >
     </ form >
</ body >
</ html >

注意javascrip .

 

function  change()
     { 
      
        var  divs =  document.getElementsByTagName( " div " )
         for  ( var  k = 0 ;k < divs.length;k ++ )
        {  
                 var  flag = divs[k].id + "" ;
                 var  flagarray = new  Array();
                    flagarray = flag;
                 if  ((flag.substring( 0 , 15 ) == " NavigationMenun " ) && (flag.length == 21 ) )
                   
                 { alert(divs[k].id);
                     var  tables = divs[k].getElementsByTagName( " table " );
                     var  select = tables[ 0 ];
                    select.style.borderColor = " #9C9A9C " ;
                    select.style.borderWidth = " 1px " ;
                    select.style.borderStyle = " Solid " ;
                    select.style.width = " 160 " ;
                 }
        }
      
      
          }
          

  效果不在完美...如下 
 

转载于:https://www.cnblogs.com/gwazy/archive/2005/06/21/178547.html