如何将样式表应用于asp.net菜单控件的“动态"项目 [英] how to apply style sheet to Dynamic item of asp.net menu control

问题描述

如何在ASP.net Menu控件中为单个动态"菜单项应用CSS类.下面我给控件的外观如下:

< asp:菜单ID ="cssTasksReports" runat ="server" Orientation ="Vertical" StaticDisplayLevels ="1">
< staticmenuitemstyle itemspacing ="2" backcolor =#EAF4FF">
ForeColor =#006699"宽度="200"/>
< statichoverstyle>
< staticselectedstyle>
< items>

这里的链接将来自数据库



在上面的代码中

< items>将会来自数据库，我的疑问是如何将CSS应用于这些是网页的项目.

CSS将包含以下内容:这是针对

Hi,

How to apply the CSS Class for Individual Dynamic menu item in ASP.net Menu control. below i am giving the control look like as:

<asp:Menu ID="cssTasksReports" runat="server" Orientation="Vertical" StaticDisplayLevels="1" >
<staticmenuitemstyle itemspacing="2" backcolor="#EAF4FF">
ForeColor="#006699" Width="200" />
<statichoverstyle>
<staticselectedstyle>
<items>

Here links will come from database



in the above code

<items> will come from the database here my doubt is how to apply css to these items these are webpages.

css will contain like: this is for menu items that are in


#panel {

宽度:200px;

list-style:无；
padding-top:10px;
display:inline-block;
}

#panel li {
border-radius:3px 3px 3px 3px;
margin-top:5px;
宽度:100px;
背景:#9999CC；
背景:背景:-webkit-linear-gradient(top，#2F2727，#1a82f7);
左边框:1px，纯红色； border-top:1px红色常亮；边框右:1px红色常亮； border-bottom:1px纯红色；
}

#panel li.animation {
-webkit-transition:全部0.5s缓入；
-webkit-transform:translateX(0px);
}

#panel li.animation:hover {
-webkit-transform:translateX(25px);
}

#panel li a {
颜色:绿色；
显示:块;
padding:10px;
}

#panel li a:hover {
颜色:#00c6ff;
}

</style>

请尽快通知我.

提前致谢.
此致
Raghu.
in need to create <asp:menu>

#panel {

width:200px;

list-style:none;
padding-top:10px;
display:inline-block;
}

#panel li {
border-radius:3px 3px 3px 3px;
margin-top:5px;
width:100px;
background: #9999CC;
background: background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
border-left:1px solid red; border-top:1px solid red; border-right:1px solid red; border-bottom:1px solid red;
}

#panel li.animation {
-webkit-transition: all 0.5s ease-in-out;
-webkit-transform:translateX(0px);
}

#panel li.animation:hover {
-webkit-transform:translateX(25px);
}

#panel li a {
color:Green;
display:block;
padding:10px;
}

#panel li a:hover {
color:#00c6ff;
}

</style>

Please let me know as soon as possible.

Thanks in Advance.
Regards,
Raghu.

推荐答案

好，
首先在css文件中创建一个类，将其命名为.myMenu，然后将asp:Menu的CssClass属性设置为myMenu.


Ok,
First of all create a class in the css file, let''s call it .myMenu, then set the CssClass attribute of the asp:Menu to myMenu.


.myMenu
{
color:#006699;
width:200px
}




<asp:Menu ID="cssTasksReports" runat="server" Orientation="Vertical" StaticDisplayLevels="1" CssClass="myMenu" />


现在将项目样式添加到CSS



Now add your item styles to the CSS


.myMenu LI
{
border-radius:3px 3px 3px 3px; 
margin-top:5px;
width:100px;
background: #9999CC;
background: background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
border-left:1px solid red; border-top:1px solid red; border-right:1px solid red; border-bottom:1px solid red;
}

等...

页面加载后，按F12键打开开发人员的工具栏，您将看到菜单控件如何以HTML呈现以及CSS如何应用于元素.

etc...

After your page has loaded press F12 to open the developer''s toolbar and you can see how the menu control is rendered in HTML and how the CSS is being applied to the elements.




这篇关于如何将样式表应用于asp.net菜单控件的“动态"项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！