asp:Menu et css de l'élément sélectionné
Je vais avoir des problèmes pour configurer mon asp:Menu. Lorsque j'utilise le css, les éléments de menu ne sont pas sélectionnés plus. J'ai essayé 3 versions, et chacun a ses inconvénient.
Ce un travail la meilleure pour le css, mais l'élément sélectionné n'est pas d'être sélectionné.
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false"DataSourceID="smdsMaster" StaticDisplayLevels="2">
<LevelMenuItemStyles>
<asp:MenuItemStyle ForeColor="White"/>
<asp:MenuItemStyle ForeColor="White" />
</LevelMenuItemStyles>
<Items>
<asp:MenuItem Text="Menu 1" NavigateUrl="~/Menu1.aspx" />
<asp:MenuItem Text="Menu 2" NavigateUrl="~/Menu2.aspx" >
<asp:MenuItem Text="Submenu 2" NavigateUrl="~/Submenu2.aspx" />
</asp:MenuItem>
<asp:MenuItem Text="Menu 3" NavigateUrl="~/Menu3.aspx" />
</Items>
</asp:Menu>
Cette montre sélectionnée, mais je ne peux pas utiliser les images comme backgound pour les menuitems. Si j'ajoute css en elle, le choix de ne pas montrer non plus. Et le sous-élément est toujours présent.
<asp:Menu ID="NavigationMenu" runat="server" DataSourceID="smdsMaster" DynamicHorizontalOffset="0" StaticEnableDefaultPopOutImage="false"
Orientation="Horizontal" StaticDisplayLevels="2" StaticSubMenuIndent="0px" MaximumDynamicDisplayLevels="2" OnMenuItemDataBound="Menu1_MenuItemDataBound"
ForeColor="White" BackColor="#EE7B00" StaticItemFormatString="<p align=center> {0}" DynamicItemFormatString="<p align=center> {0}">
<StaticMenuItemStyle BackColor="#EE7B00" Width="110px" Height="31px" HorizontalPadding="0px" VerticalPadding="0px" />
<StaticHoverStyle BackColor="#CCCC00" />
<StaticSelectedStyle BackColor="#CCCC00" />
<DynamicMenuItemStyle HorizontalPadding="0px" VerticalPadding="0px" Width="110px" Height="31px" />
<DynamicHoverStyle BackColor="#CCCC00" />
<DynamicMenuStyle BackColor="#EE7B00" />
<DynamicSelectedStyle BackColor="#CCCC00" />
</asp:Menu>
Comment puis-je avoir deux images comme arrière-plan pour mon menuitems, avec du texte, ET montrer de la sorcière de l'élément sélectionné.
Grâce.
Mise à JOUR
Ici est le CSS qui va avec:
.page .header_menu .menu
{
!margin: 0px;
padding: 0;
list-style: none;
background: none;
z-index: 3;
}
.page .header_menu .menu li
{
padding: 0;
margin: 0;
height: 31px;
list-style: none;
background-repeat: no-repeat;
float: left;
width: 110px;
}
.page .header_menu .menu li a
{
display: block;
text-decoration: none;
text-align: center;
height: 31px;
width: 110px;
padding-top: 5px;
background-repeat: no-repeat;
background-image: url(../Assets/btn-back-normal.gif);
color: white;
margin-top: -1px; /*Chrome = -16, IE = 0*/
z-index: 1;
}
.page .header_menu .menu li a:hover
{
background-image: url(../Assets/btn-back-over.gif);
color: white;
margin-top: -1px; /*Chrome = -16, IE = 0*/
z-index: 1;
width: 110px;
}
.page .header_menu .menu li a:active, .page .header_menu .menu li a:selected
{
background-image: url(../Assets/btn-back-selected.gif);
color: white;
margin-top: -1px;
z-index: 1;
width: 110px;
}
.page .header_menu .menu:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
z-index: 1;
width: 110px;
}
J'ai aussi essayé de définir ces, mais seul le premier élément reste sélectionné, peu importe wicht un fait est sélectionné
<style type="text/css">
#NavigationMenu a{padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #EE7B00;}
#NavigationMenu a.static{ padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #EE7B00;}
#NavigationMenu a.static.selected{padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #cccc00;}
#NavigationMenu a.dynamic{padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #EE7B00;}
#NavigationMenu a.dynamic.selected{padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #cccc00;}
</style>
- Essayez de nous montrer votre HTML + CSS, pas votre .NET code source.
Vous devez vous connecter pour publier un commentaire.
Si vous exécutez votre .page aspx et examiner la source, vous remarquerez que l'élément de menu
<a>
(lien hypertexte) balise dispose d'une classe sélectionnée appelé un.sélectionné.statique vous pouvez implémenter votre propre version de cette dans votre code et de le remplacer par l'application de!important
à la classe CSS.L'exemple ci-dessous affiche un menu simple avec l'image les éléments de menu et les faits saillants de l'image avec une bordure rouge lorsqu'il est sélectionné: