web-dev-qa-db-fra.com

Comment styler un menu asp.net avec CSS

Je suis en train de styler un menu asp.net et j'essaie de comprendre la signification des paramètres StaticSelectedStyle-CssClass et StaticHoverStyle-CssClass.

D'après ce que je comprends, les styles définis avec ces paramètres sont appliqués en tant que classes CSS aux éléments pertinents, le cas échéant. J'ai donc créé mon menu comme suit:

<asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource" 
        StaticMenuStyle-CssClass="StaticMenuStyle"
        StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
        StaticSelectedStyle-CssClass="StaticSelectedStyle"
        StaticHoverStyle-CssClass="StaticHoverStyle"
        Orientation="Horizontal" 
        MaximumDynamicDisplayLevels="0" 
        runat="server">
</asp:Menu>

Cela fonctionne pour StaticMenuStyle-CssClass et StaticMenuStyle-CssClass (les classes sont appliquées aux éléments pertinents), mais StaticSelectedStyle-CssClass et StaticHoverStyle-CssClass ne sont pas appliqués, indépendamment du statut sélectionné ou survolé d'un élément.

Qu'est-ce que je suis supposé faire pour que cela fonctionne?

Merci.

EDIT: Désolé, j'aurais dû mentionner qu'il s'agit de .NET 4. Voici le code HTML généré:

<div id="NavigationMenu">
 <ul class="level1 StaticMenuStyle">
  <li><a class="level1 StaticMenuItemStyle selected" href="/Link.aspx">Link</a></li>
 </ul>
</div>

Comme vous pouvez le constater, StaticMenuStyle et StaticMenuItemStyle sont appliqués, mais pas StaticSelectedStyle-CssClass ou StaticHoverStyle-CssClass. Pas certain de pourquoi. Je sais que je peux utiliser selected mais le comportement attendu de StaticSelectedStyle-CssClass n'est-il pas appliqué ??? En utilisant selected, je pose des hypothèses sur ce que fait NET. Dans les coulisses, ce n’est pas correct.

asp.netcss
23
md1337

Très bien, il n’ya donc manifestement pas beaucoup de personnes qui ont essayé le menu .NET 4 à ce jour. Pas étonnant puisque la version finale est sortie il y a quelques jours. Il semble que je sois le premier à avoir rendu compte de ce qui semble être un bug. Je signalerai ceci à MS si je trouve le temps, mais étant donné que MS a fait ses preuves en ne prêtant pas attention aux rapports de bogues, je ne me précipite pas là-dessus.

Quoi qu’il en soit, à ce stade, la solution la moins grave est de copier-coller les styles CSS générés par le contrôle (cochez l’en-tête) dans votre propre feuille de style et de le modifier à partir de là. Ceci fait, n'oubliez pas de définir IncludeStyleBlock = "False" dans votre menu afin d'empêcher la génération automatique du CSS, car nous utiliserons désormais le bloc copié. Conceptuellement, cela n’est pas correct car votre application ne devrait pas s’appuyer sur du code généré automatiquement, mais c’est la seule option à laquelle je peux penser.

7
md1337

Je sens ta douleur et j'ai perdu toute la nuit/le matin à essayer de résoudre ce problème… .. Avec la force brutale, j'ai trouvé une solution. Appelez cela une solution de contournement - mais c'est simple.

Ajoutez la propriété CssClass à la déclaration de votre contrôle de menu comme suit:

<asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource"
        CssClass="SomeMenuClass"
        StaticMenuStyle-CssClass="StaticMenuStyle"
        StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
        Orientation="Horizontal" 
        MaximumDynamicDisplayLevels="0" 
        runat="server">
</asp:Menu>

Il suffit d'extraire les attributs StaticSelectedStyle-CssClass et StaticHoverStyle-CssClass, car ils ne font tout simplement pas de prise.

Maintenant, créez le "SomeMenuClass", peu importe ce que vous y mettez. Ça devrait ressembler a quelque chose comme ca:

.SomeMenuClass
{
    color:Green;
}

Ajoutez ensuite les deux classes CSS suivantes:

Pour le style "Hover", ajoutez:

.SomeMenuClass a.static.highlighted
{
    color:Red !important;
}

Pour le style "sélectionné", ajoutez:

.SomeMenuClass a.static.selected
{
    color:Blue !important;
}

Voilà, c'est ça. Vous avez terminé. J'espère que cela évite à certains d'entre vous la frustration que j'ai vécue. BTW: Vous avez mentionné:

Je semble être le premier à avoir jamais été signaler ce qui semble être un bug.

Vous sembliez également penser qu'il s'agissait d'un nouveau bogue .NET 4.0. J'ai trouvé ceci: http://www.velocityreviews.com/forums/t649530-problem-with-staticselected-and-statichoverstyle.html .__ posté en 2008 concernant Asp.Net 2.0. Comment sommes-nous les trois seules personnes sur la planète à se plaindre à ce sujet?

Comment j'ai trouvé la solution de contournement (étudiez la sortie HTML):

Voici la sortie HTML lorsque je définis StaticHoverStyle-BackColor = "Red":

#NavigationMenu a.static.highlighted
{
    background-color:Red;
}

Voici la sortie HTML lors de la définition de StaticSelectedStyle-BackColor = "Blue":

#NavigationMenu a.static.selected
{
    background-color:Blue;
    text-decoration:none;
}

Par conséquent, le moyen logique de remplacer ce balisage consistait à créer des classes pour SomeMenuClass a.static.highlighted _ et SomeMenuClass a.static.selected

Notes spéciales:

Vous DEVEZ également utiliser "! Important" sur TOUS les paramètres de ces classes car la sortie HTML utilise "#NavigationMenu", ce qui signifie que tous les styles Asp.Net décident d'y ajouter des éléments. car vous aurez la priorité de l'héritage sur tous les autres styles du contrôle de menu portant l'ID "NavigationMenu". Une des choses que j'ai eu du mal à faire était le rembourrage, jusqu'à ce que je sache qu'Asp.Net utilisait "#NavigationMenu" pour définir le rembourrage gauche et droit sur 15em. J'ai ajouté "! Important} _" à mes styles SomeMenuClass et ça a fonctionné.

34
MikeTeeVee

Je me souviens de l'attribut StaticSelectedStyle-CssClass utilisé pour travailler dans ASP.NET 2.0. Et dans .NET 4.0, si vous modifiez l'attribut RenderingMode du contrôle Menu "Table" (le rendant ainsi les menus comme s et sous-s comme il l'a fait en arrière '05), il va au moins écrire votre StaticSelectedStyle-CssClass spécifié dans le html approprié élément. 

Cela peut suffire pour que votre page fonctionne comme vous le souhaitez. Toutefois, mon solution de contournement pour l'élément de menu sélectionné dans ASP 4.0 (en laissant RenderingMode par défaut) consiste à imiter la classe CSS "sélectionnée" du contrôle générée, mais à donner à moi la déclaration CSS "! Importante" afin que mes styles avoir la priorité si nécessaire. 

Par exemple, par défaut, le contrôle Menu génère un élément "li" et un enfant "a" pour chaque élément de menu. L'élément "a" de l'élément de menu sélectionné contiendra class = "selected" (parmi d'autres noms de classes CSS générés par le contrôle, notamment "statique" si c'est un élément de menu statique), j'ajoute donc mon propre sélecteur à la page (ou dans un fichier de feuille de style séparé) pour les balises "static" et "selected" "a" comme ceci:

a.selected.static
{
background-color: #f5f5f5 !important;
border-top: Red 1px solid !important;
border-left: Red 1px solid !important;
border-right: Red 1px solid !important;
}
4
user1664143

Je suis tombé sur le problème où la classe de 'sélectionné' n'était pas ajoutée à mon élément de menu. Il s'avère que vous ne pouvez pas avoir un NavigateUrl dessus pour une raison quelconque.

Une fois le NavigateUrl supprimé, il a appliqué la classe CSS «sélectionnée» à la balise a et j'ai pu appliquer le style d'arrière-plan avec:

div.menu ul li a.static.selected
{
    background-color: #bfcbd6 !important;
    color: #465c71 !important;
    text-decoration: none !important;
}
3
ryanjones

J'ai essayé la solution de MikeTeeVee, ça ne fonctionne toujours pas, je veux dire que l'onglet sélectionné ne change toujours pas et garde une couleur différente. Ce message a résolu mon problème: Définir la classe CSS 'sélectionnée' dans les parents du menu ASP.NET et leurs enfants? Besoin de mettre le code dans le code derrière.

2
Charles

Je veux juste jeter quelque chose pour aider les gens qui ont encore ce problème. (pour moi du moins) le css montre qu'il place les classes par défaut de niveau 1, niveau 2 et niveau 3 sur chaque élément du menu (le niveau 1 étant le menu, le niveau 2 étant le premier menu déroulant, le niveau 3 étant le troisième menu déroulant). Réglage du padding en css 

.level2
{
padding: 2px 2px 2px 2px;
}

fonctionne pour ajouter le remplissage à chaque li dans le premier menu déroulant. 

2
jeremy

La chose à regarder est ce que HTML est craché par le contrôle. Dans ce cas, il crée un tableau pour créer le menu. Le style de survol est défini sur le TD et une fois que vous avez sélectionné un élément de menu, le contrôle enregistre et ajoute le style sélectionné à la balise A du lien dans le TD.

Donc, vous avez deux éléments différents qui sont manipulés ici. L'un est un élément TD et un autre est un élément A. Donc, vous devez faire fonctionner votre CSS en conséquence. Si j'ajoute le CSS ci-dessous à une page avec le menu, le comportement attendu de la couleur d'arrière-plan change dans les deux cas. Vous faites peut-être des manipulations CSS différentes qui peuvent ou non s’appliquer à ces éléments.

<style>
    .StaticHoverStyle
    {
        background: #000000;
    }

    .StaticSelectedStyle
    {
        background: blue;
    }
</style>
1
Harv

Je ne sais pas pourquoi toutes les réponses ici sont si confuses. J'ai trouvé un plus simple. Utilisez une classe css pour asp: le menu, disons, mainMenu et tous les éléments de menu situés sous ce seront des "balises" lors du rendu en HTML. Il suffit donc de fournir la propriété: hover à ces "balises" dans votre CSS . Voir ci-dessous pour l'exemple:

<asp:Menu ID="mnuMain" Orientation="Horizontal" runat="server" Font-Bold="True" Width="100%" CssClass="mainMenu">
  <Items>
    <asp:MenuItem Text="Home"></asp:MenuItem>
    <asp:MenuItem Text="About Us"></asp:MenuItem>
  </Items>
</asp:Menu>

Et dans le CSS, écrivez:

.mainMenu { background:#900; }
.mainMenu a { color:#fff; }
.mainMenu a:hover { background:#c00; color:#ff9; }

J'espère que ça aide. :)

1
Sonam

Vous pouvez essayer de styler avec LevelSubMenuStyles

            <asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal" 
                StaticEnableDefaultPopOutImage="False">
                <StaticMenuStyle CssClass="test" />
                <LevelSubMenuStyles>
                    <asp:SubMenuStyle BackColor="#33CCFF" BorderColor="#FF9999" 
                        Font-Underline="False" />
                    <asp:SubMenuStyle BackColor="#FF99FF" Font-Underline="False" />
                </LevelSubMenuStyles>
                <StaticMenuItemStyle CssClass="main-nav-item" />
            </asp:Menu>
0
Prasanna

Les meilleurs résultats que j'ai obtenus avec ce contrôle endommagé impliquaient de ne pas utiliser du tout de css, mais plutôt d'utiliser les propriétés de contrôle intégrées pour le style (DynamicMenuItemStyle-BackColor, StaticHoverStyle-Width, etc.). C'est une pratique terrible qui gonfle votre code et vous oblige à le faire pour chaque instance du contrôle. 

Cela fonctionne cependant.

0
ScottLenart