asp.net menu 控件样式 范例横向

于 2011-11-14 20:05:30 发布
阅读量5.6k 收藏 5
点赞数 1
CC 4.0 BY-SA版权
文章标签： menu asp.net string asp integer server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lcnmdfx/article/details/6969911
本文详细介绍了如何配置 ASP.NET 中的 Menu 控件，包括静态和动态菜单样式、动态菜单的水平偏移量和垂直偏移量等属性。通过示例代码展示了如何设置 CSS 样式以实现个性化菜单效果，并提供了相应的 CSS 示例，帮助开发者创建出美观的横向菜单。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 <asp:Menu
    AccessKey="string"
    BackColor="color name|#dddddd"
    BorderColor="color name|#dddddd"
    BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
        Inset|Outset"
    BorderWidth="size"
    CssClass="string"
    DataSource="string"
    DataSourceID="string"
    DisappearAfter="integer"
    DynamicBottomSeparatorImageUrl="uri"
    DynamicEnableDefaultPopOutImage="True|False"
    DynamicHorizontalOffset="integer"
    DynamicItemFormatString="string"
    DynamicPopOutImageTextFormatString="string"
    DynamicPopOutImageUrl="uri"
    DynamicTopSeparatorImageUrl="uri"
    DynamicVerticalOffset="integer"
    Enabled="True|False"
    EnableTheming="True|False"
    EnableViewState="True|False"
    Font-Bold="True|False"
    Font-Italic="True|False"
    Font-Names="string"
    Font-Overline="True|False"
    Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|
        Large|X-Large|XX-Large"
    Font-Strikeout="True|False"
    Font-Underline="True|False"
    ForeColor="color name|#dddddd"
    Height="size"
    ID="string"
    ItemWrap="True|False"
    MaximumDynamicDisplayLevels="integer"
    OnDataBinding="DataBinding event handler"
    OnDataBound="DataBound event handler"
    OnDisposed="Disposed event handler"
    OnInit="Init event handler"
    OnLoad="Load event handler"
    OnMenuItemClick="MenuItemClick event handler"
    OnMenuItemDataBound="MenuItemDataBound event handler"
    OnPreRender="PreRender event handler"
    OnUnload="Unload event handler"
    Orientation="Horizontal|Vertical"
    PathSeparator="string"
    runat="server"
    ScrollDownImageUrl="uri"
    ScrollDownText="string"
    ScrollUpImageUrl="uri"
    ScrollUpText="string"
    SkinID="string"
    SkipLinkText="string"
    StaticBottomSeparatorImageUrl="uri"
    StaticDisplayLevels="integer"
    StaticEnableDefaultPopOutImage="True|False"
    StaticItemFormatString="string"
    StaticPopOutImageTextFormatString="string"
    StaticPopOutImageUrl="uri"
    StaticSubMenuIndent="size"
    StaticTopSeparatorImageUrl="uri"
    Style="string"
    TabIndex="integer"
    Target="string"
    ToolTip="string"
    Visible="True|False"
    Width="size"
>
        <DataBindings>
                <asp:MenuItemBinding
                    DataMember="string"
                    Depth="integer"
                    Enabled="True|False"
                    EnabledField="string"
                    FormatString="string"
                    ImageUrl="uri"
                    ImageUrlField="string"
                    NavigateUrl="uri"
                    NavigateUrlField="string"
                    PopOutImageUrl="uri"
                    PopOutImageUrlField="string"
                    Selectable="True|False"
                    SelectableField="string"
                    SeparatorImageUrl="uri"
                    SeparatorImageUrlField="string"
                    Target="string"
                    TargetField="string"
                    Text="string"
                    TextField="string"
                    ToolTip="string"
                    ToolTipField="string"
                    Value="string"
                    ValueField="string"
                />
        </DataBindings>
        <DynamicHoverStyle />
        <DynamicItemTemplate>
            <!-- child controls -->
        </DynamicItemTemplate>
        <DynamicMenuItemStyle
            BackColor="color name|#dddddd"
            BorderColor="color name|#dddddd"
            BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
                Groove|Ridge|Inset|Outset"
            BorderWidth="size"
            CssClass="string"
            Font-Bold="True|False"
            Font-Italic="True|False"
            Font-Names="string"
            Font-Overline="True|False"
            Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
                Medium|Large|X-Large|XX-Large"
            Font-Strikeout="True|False"
            Font-Underline="True|False"
            ForeColor="color name|#dddddd"
            Height="size"
            HorizontalPadding="size"
            ItemSpacing="size"
            OnDisposed="Disposed event handler"
            VerticalPadding="size"
            Width="size"
        />
        <DynamicMenuStyle
            BackColor="color name|#dddddd"
            BorderColor="color name|#dddddd"
            BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
                Groove|Ridge|Inset|Outset"
            BorderWidth="size"
            CssClass="string"
            Font-Bold="True|False"
            Font-Italic="True|False"
            Font-Names="string"
            Font-Overline="True|False"
            Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
                Medium|Large|X-Large|XX-Large"
            Font-Strikeout="True|False"
            Font-Underline="True|False"
            ForeColor="color name|#dddddd"
            Height="size"
            HorizontalPadding="size"
            OnDisposed="Disposed event handler"
            VerticalPadding="size"
            Width="size"
        />
        <DynamicSelectedStyle
            BackColor="color name|#dddddd"
            BorderColor="color name|#dddddd"
            BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
                Groove|Ridge|Inset|Outset"
            BorderWidth="size"
            CssClass="string"
            Font-Bold="True|False"
            Font-Italic="True|False"
            Font-Names="string"
            Font-Overline="True|False"
            Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
                Medium|Large|X-Large|XX-Large"
            Font-Strikeout="True|False"
            Font-Underline="True|False"
            ForeColor="color name|#dddddd"
            Height="size"
            HorizontalPadding="size"
            ItemSpacing="size"
            OnDisposed="Disposed event handler"
            VerticalPadding="size"
            Width="size"
        />
        <Items />
        <LevelMenuItemStyles>
                <asp:MenuItemStyle
                    BackColor="color name|#dddddd"
                    BorderColor="color name|#dddddd"
                    BorderStyle="NotSet|None|Dotted|Dashed|Solid|
                        Double|Groove|Ridge|Inset|Outset"
                    BorderWidth="size"
                    CssClass="string"
                    Font-Bold="True|False"
                    Font-Italic="True|False"
                    Font-Names="string"
                    Font-Overline="True|False"
                    Font-Size="string|Smaller|Larger|XX-Small|
                        X-Small|Small|Medium|Large|X-Large|XX-Large"
                    Font-Strikeout="True|False"
                    Font-Underline="True|False"
                    ForeColor="color name|#dddddd"
                    Height="size"
                    HorizontalPadding="size"
                    ItemSpacing="size"
                    OnDisposed="Disposed event handler"
                    VerticalPadding="size"
                    Width="size"
                />
        </LevelMenuItemStyles>
        <LevelSelectedStyles>
                <asp:MenuItemStyle
                    BackColor="color name|#dddddd"
                    BorderColor="color name|#dddddd"
                    BorderStyle="NotSet|None|Dotted|Dashed|Solid|
                        Double|Groove|Ridge|Inset|Outset"
                    BorderWidth="size"
                    CssClass="string"
                    Font-Bold="True|False"
                    Font-Italic="True|False"
                    Font-Names="string"
                    Font-Overline="True|False"
                    Font-Size="string|Smaller|Larger|XX-Small|
                        X-Small|Small|Medium|Large|X-Large|XX-Large"
                    Font-Strikeout="True|False"
                    Font-Underline="True|False"
                    ForeColor="color name|#dddddd"
                    Height="size"
                    HorizontalPadding="size"
                    ItemSpacing="size"
                    OnDisposed="Disposed event handler"
                    VerticalPadding="size"
                    Width="size"
                />
        </LevelSelectedStyles>
        <LevelSubMenuStyles>
                <asp:SubMenuStyle
                    BackColor="color name|#dddddd"
                    BorderColor="color name|#dddddd"
                    BorderStyle="NotSet|None|Dotted|Dashed|Solid|
                        Double|Groove|Ridge|Inset|Outset"
                    BorderWidth="size"
                    CssClass="string"
                    Font-Bold="True|False"
                    Font-Italic="True|False"
                    Font-Names="string"
                    Font-Overline="True|False"
                    Font-Size="string|Smaller|Larger|XX-Small|
                        X-Small|Small|Medium|Large|X-Large|XX-Large"
                    Font-Strikeout="True|False"
                    Font-Underline="True|False"
                    ForeColor="color name|#dddddd"
                    Height="size"
                    HorizontalPadding="size"
                    OnDisposed="Disposed event handler"
                    VerticalPadding="size"
                    Width="size"
                />
        </LevelSubMenuStyles>
        <StaticHoverStyle />
        <StaticItemTemplate>
            <!-- child controls -->
        </StaticItemTemplate>
        <StaticMenuItemStyle
            BackColor="color name|#dddddd"
            BorderColor="color name|#dddddd"
            BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
                Groove|Ridge|Inset|Outset"
            BorderWidth="size"
            CssClass="string"
            Font-Bold="True|False"
            Font-Italic="True|False"
            Font-Names="string"
            Font-Overline="True|False"
            Font-Size="string|Smaller|Larger|XX-Small|
                X-Small|Small|Medium|Large|X-Large|XX-Large"
            Font-Strikeout="True|False"
            Font-Underline="True|False"
            ForeColor="color name|#dddddd"
            Height="size"
            HorizontalPadding="size"
            ItemSpacing="size"
            OnDisposed="Disposed event handler"
            VerticalPadding="size"
            Width="size"
        />
        <StaticMenuStyle
            BackColor="color name|#dddddd"
            BorderColor="color name|#dddddd"
            BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
                Groove|Ridge|Inset|Outset"
            BorderWidth="size"
            CssClass="string"
            Font-Bold="True|False"
            Font-Italic="True|False"
            Font-Names="string"
            Font-Overline="True|False"
            Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
                Medium|Large|X-Large|XX-Large"
            Font-Strikeout="True|False"
            Font-Underline="True|False"
            ForeColor="color name|#dddddd"
            Height="size"
            HorizontalPadding="size"
            OnDisposed="Disposed event handler"
            VerticalPadding="size"
            Width="size"
        />
        <StaticSelectedStyle
            BackColor="color name|#dddddd"
            BorderColor="color name|#dddddd"
            BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
                Groove|Ridge|Inset|Outset"
            BorderWidth="size"
            CssClass="string"
            Font-Bold="True|False"
            Font-Italic="True|False"
            Font-Names="string"
            Font-Overline="True|False"
            Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
                Medium|Large|X-Large|XX-Large"
            Font-Strikeout="True|False"
            Font-Underline="True|False"
            ForeColor="color name|#dddddd"
            Height="size"
            HorizontalPadding="size"
            ItemSpacing="size"
            OnDisposed="Disposed event handler"
            VerticalPadding="size"
            Width="size"
        />
</asp:Menu>


下面的示例提供 Menu 控件的声明性代码。

 

<asp:menu id="NavigationMenu1" CssClass="menu1"
  staticdisplaylevels="3"
  staticsubmenuindent="0" 
  orientation="Vertical"
  target="_blank"
  Font-names="Arial, Gill Sans"
  Width="100px"
  runat="server">

  <LevelMenuItemStyles>
    <asp:MenuItemStyle CssClass="level1"/>
    <asp:MenuItemStyle CssClass="level2"/>
    <asp:MenuItemStyle CssClass="level3" />
  </LevelMenuItemStyles>
  
  <StaticHoverStyle CssClass="hoverstyle"/>
  
  <LevelSubMenuStyles>
    <asp:SubMenuStyle CssClass="sublevel1" />
  </LevelSubMenuStyles>
  
  <items>
    <asp:menuitem text="Home" tooltip="Home">
    <asp:menuitem text="Section 1" tooltip="Section 1">
      <asp:menuitem text="Item 1" tooltip="Item 1"/>
      <asp:menuitem text="Item 2" tooltip="Item 2"/>
      <asp:menuitem text="Item 3" tooltip="Item 3"/>
    </asp:menuitem>
    <asp:menuitem text="Section 2" tooltip="Section 2">
      <asp:menuitem text="Item 1" tooltip="Item 1"/>
      <asp:menuitem text="Item 2" tooltip="Item 2">
        <asp:MenuItem Text="Subitem 1"/>
        <asp:menuitem Text="Subitem 2" />
      </asp:menuitem>
      <asp:menuitem text="Item 3" tooltip="Item 3"/>
    </asp:menuitem>
  </asp:menuitem>
  </items>
</asp:menu>
 Menu 控件的 CSS 代码。 

 
 
 
 
 
  
 
   
 
  
 
  
 
   
 
    
.level1
{
    color: White;
    background-color: Black;
    font-variant: small-caps;
    font-size: large;
    font-weight: bold;
}

.level2
{
    color: Blue;
    font-family: Gill Sans MT !important;
    font-size: medium;
    background-color: Gray;
}

.level3
{
    color: black;
    background-color: Silver;
    font-family: Gill Sans MT !important;
    font-size: small;
}

.hoverstyle
{
    font-weight: bold;
}
       
.sublevel1
{
    background-color: Gray !important;
    color: White !important;
    font-variant: small-caps;
}  

 
   
 
  
 
 
 

 

 

 

 


 
 


 
 


 
 

asp.net menu 控件样式 范例横向
 

 

 

<asp:Menu  ID="mnuTopMenu" runat="server" DynamicEnableDefaultPopOutImage="False"
 
                    DynamicHorizontalOffset
="-1"
 Font-Bold
="false"
 Orientation
="Horizontal"
 StaticEnableDefaultPopOutImage
="False"

                     StaticSubMenuIndent
="10px"
 DisappearAfter
="600"

                     StaticSelectedStyle-CssClass
="StaticSelectedStyle"

                     StaticMenuItemStyle-CssClass
="StaticMenuItemStyle"

                     StaticHoverStyle-CssClass
="StaticHoverStyle"

                     DynamicMenuStyle-CssClass
="DynamicMenuStyle"

                     DynamicSelectedStyle-CssClass
="DynamicSelectedStyle"

                     DynamicMenuItemStyle-CssClass
="DynamicMenuItemStyle"

                     DynamicHoverStyle-CssClass
="DynamicHoverStyle"

                      onmenuitemclick
="mnuTopMenu_MenuItemClick"

>

                   
<
Items
></
Items
>

                 
</
asp:Menu
>

 
/*
Start    顶部菜单////////////////////////////////////////////////////////////***********
*/

 
 
 .mnuTopMenu
 
{

     background-color
:
Transparent
;

     font-family
:
 宋体
;

     font-size
:
 12px
;

     position
:
relative
;

     top
:
34px
;

 
}

 
 .DynamicMenuStyle 
/*
动态菜单矩形区域样式
*/

 
{

     background-color
:
 white
;

     border
:
 solid 1px #ACC3DF
;

     padding
:
 1px 1px 1px 1px
;

     text-align
:
 left
;

 
}

 
 .DynamicHoverStyle 
/*
动态菜单项:鼠标悬停时的样式
*/

 
{

     background-color
:
 #F7DFA5
;

/*
#7C6F57;
*/

     color
:
 #333333
;

 
}

 
 .DynamicSelectedStyle 
/*
动态菜单项:选择时的样式
*/

 
{

     
/*
background-color:Gainsboro;
*/

     color
:
 red
;

 
}

 
 .DynamicMenuItemStyle 
/*
动态菜单项样式
*/

 
{

     padding
:
 2px 5px 2px 5px
;

     color
:
 #333333
;

 
}

 
 
 .StaticSelectedStyle 
/*
静态菜单项:选择时的样式
*/

 
{

     
/*
background-color:Gainsboro;
*/

     color
:
 red
;

 
}

 
 .StaticMenuItemStyle 
/*
静态菜单项样式
*/

 
{

     cursor
:
 hand
;

     padding
:
 2px 5px 2px 5px
;

     color
:
 #333333
;

     background-color
:
:Transparent
;

 
}

 
 .StaticHoverStyle 
/*
静态菜单项:鼠标悬停时的样式
*/

 
{

     background-color
:
 #84BCCD
;

/*
#7C6F57;
*/

     cursor
:
 hand
;

     color
:
 #333333
;

 
}

 
 
/*
End    顶部菜单////////////////////////////////////////////////////////////***********
*/

 在页面中加入 

             <div id="menu">
                     <asp:SiteMapDataSource ID="siteMapDS" runat="server" ShowStartingNode="false" />
                     <asp:Menu runat="server" ID="mainMenu" DataSourceID="siteMapDS" Orientation ="horizontal">
                    </asp:Menu> 
              </div> 
 在主题的皮肤文件中写入下列代码:  
 <asp:Menu runat="server"
 

 DynamicHorizontalOffset="6"
 

 StaticPopOutImageUrl="Images/flyout.gif"
 

 DynamicPopOutImageUrl="Images/flyout.gif"   >
 

    <StaticMenuStyle Width="180px" Font-Size="Medium" />
 

    <StaticMenuItemStyle CssClass="menuNormal" VerticalPadding="6" />
 

    <StaticHoverStyle CssClass="menuHover" />
 

    <StaticSelectedStyle CssClass="menuSelected" />
 

    <DynamicMenuStyle CssClass="subMenu" />
 

    <DynamicMenuItemStyle CssClass="subMenuNormal" Width="188px" VerticalPadding="6" />
 

    <DynamicHoverStyle CssClass="subMenuHover" Width="180px" />     
 

</asp:Menu> 
  
 上述代码的含义可以参考MSDN,但是这里列出一些:
 Menu. DynamicHorizontalOffset:获取或设置动态菜单相对于其父菜单项的水平移动像素数。
   Menu.DynamicVerticalOffset:获取或设置动态菜单相对于其父菜单项的垂直移动像素数。
 Menu.StaticPopOutImageUrl:获取或设置显示来指示静态菜单项包含子菜单的图像的 URL。
 DynamicPopOutImageUrl:获取或设置自定义图像的 URL，如果动态菜单项包含子菜单，该图像则显示在动态菜单项中。
 Menu.DisappearAfter 属性 :获取或设置鼠标指针不再置于菜单上后显示动态菜单的持续时间。 
 Menu.DynamicBottomSeparatorImageUrl 属性 :获取或设置图像的 URL，该图像显示在各动态菜单项底部，将动态菜单项与其他菜单项隔开。
 等等...
 

StaticMenuStyle:使用该对象可以设置静态菜单的外观。
 StaticMenuItemStyle:使用该对象可以设置静态菜单中的菜单项的外观.也就是没有被选中项的样式.
 StaticHoverStyle:使用该对象可以设置鼠标指针置于静态菜单项上时的菜单项外观。也就是鼠标指上去的时候,显示的外观.
 DynamicMenuStyle:使用该对象可以设置动态菜单的外观。 也就是弹出菜单的样式. 
  
 一个参考的CSS代码:
   
 #menu {
 

       position:absolute;
        left: 40px;
        top:0;
        width: 180px;
 }
 

#menu a {                   
 

       display:block !important;
        margin-left:40px;    
        background-image: none !important;
        background-repeat: no-repeat;
 }             
 

#menu .menuNormal {
 

       color: #FFFFFF;
        font-weight:bold;      
 

}
 

#menu .menuHover
 {
        background-color: #D8C68D;
        color: #ffffcc;
       background-image: url(Images/img_menu_hover.gif);
        background-repeat: no-repeat;
 }
 

#menu .menuSelected {
        background-color: #D8C68D;
        color: #304012;
       background-image: url(Images/img_menu_active.gif);
        background-repeat:no-repeat;
 }
 

#menu .subMenu table
 {
        background-color: #ff0066;
        background-image: url(Images/subMenu_bg1.gif);
        background-repeat: repeat-y;
        color: #ff0066; 
  
 }
 #menu .subMenuNormal {
        color:#FFFFFF;
        font-weight:bold;
 

}
 

#menu .subMenuHover td{
 

       background-color:#D8C68D;
        background-image: url(Images/img_menu_hover.gif);
        background-repeat:no-repeat;
        color:#8E985E;
 

}
 

html>body #menu .subMenuHover{      
 background-color:#D8C68D;
 


        color: #8E985E; 
      background-image: url(Images/img_menu_hover.gif); 
       background-repeat:no-repeat;
 

}
 

html>body #menu .subMenuHover td{
       background-color:transparent;
       background-image:none;
 }
 


                

        

    

    
  



    

      

        

            

              
                
                  fyrise
                
              
            

            

                关注
              
            

        

        

          
      

      










            

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值