Menu样式设置

最新推荐文章于 2023-01-06 09:11:48 发布

原创最新推荐文章于 2023-01-06 09:11:48 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#menu #url #asp #server #div #table

在页面中加入

在主题的皮肤文件中写入下列代码:

<asp:Menu runat="server"

DynamicHorizontalOffset="6"

StaticPopOutImageUrl="Images/flyout.gif"

DynamicPopOutImageUrl="Images/flyout.gif" >

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