none
asp:menu mit css funktioniert wie erwartet unter Framework 3.5 aber nicht unter 4.5. Warum? RRS feed

 > 

  • Frage

  • Question
    Anmelden
    0
    Anmelden

    Hey,

    hätte da mal eine Frage zur Navigation mit asp:menu. Ich habe den unterschiedlichen Zuständen (hover, selected, unselected) verschiedene css-styles zugewiesen. Mit dem Framework der Version 3.5 funktioniert das menü wie erwartet. Aber bei Verwendung der aktuellen Version 4.5 wird nur der "normale" Zustand angezeigt. Bei überfahren mit der Maus klappt das menü zwar auf aber das wars auch schon. Hover-Effekt und Selected-Effekt werden nicht angezeigt. Habe in einem anderen Forum schon heraus gefunden das unter 4.5 das Menü anders gerendert wird. Aber wie erreiche ich nun das mit der Version 4.5 das Menü so agiert, wie es das zuvor getan hat?

    Anbei der Code:

    <asp:Menu ID="NavigationMenu" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false">
                        <StaticMenuStyle CssClass="art-StaticMenuStyle" />
                        <StaticMenuItemStyle CssClass="art-StaticMenuItemStyle" />
                        <StaticHoverStyle CssClass="art-StaticHoverStyle" />
                        <StaticSelectedStyle CssClass="art-StaticSelectedStyle" />
                        <DynamicMenuStyle CssClass="art-DynamicMenuStyle" />
                        <DynamicMenuItemStyle CssClass="art-DynamicMenuItemStyle" />
                        <DynamicHoverStyle CssClass="art-DynamicHoverStyle" />
                        <DynamicSelectedStyle CssClass="art-DynamicSelectedStyle" />
                        <Items>
                            <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" Value="Home"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/pages/about_us.aspx" Text="Über Uns" Value="Über Uns">
                                <asp:MenuItem NavigateUrl="~/pages/subpages/comrades.aspx" Text="Kameraden" Value="Kameraden"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/pages/subpages/chronicles.aspx" Text="Chronik" Value="Chronik"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/pages/subpages/vehicle.aspx" Text="Fahrzeug" Value="Fahrzeug"></asp:MenuItem>
                            </asp:MenuItem>
                        </Items>
                    </asp:Menu>

    und noch der css-Code... nicht das es daran scheitert...

    .art-menu {
    border-left: 1px solid rgba(0, 0, 0, 0.60);
}
.art-StaticMenuStyle {
    font-family: Calibri, Arial, Verdana;
    font-size: 20px;
    font-weight:800;
    background-color: rgba(0, 0, 0, 0.60);
}
.art-StaticMenuItemStyle {
    background-color: rgba(255, 255, 255, 0.40);
    color: #ffffff;
    height: 24px;
    padding-top: 7px;
    padding-bottom: 7px;
}
.art-StaticHoverStyle {
    background-image: linear-gradient(rgb(251, 135, 78), rgb(250, 94, 15));
    color: #feebe1;
}
.art-StaticSelectedStyle {
    background-image: linear-gradient(rgb(255, 69, 69), rgb(255, 5, 5));
    color: #feebe1;
}
.art-DynamicMenuStyle {
    font-family: Calibri, Arial, Verdana;
    font-size: 20px;
    font-weight: 800;
    background-color: rgba(0, 0, 0, 0.60);
}
.art-DynamicMenuItemStyle {
    background-color: rgba(255, 255, 255, 0.40);
    color: #ffffff;
    height: 24px;
    padding-top: 7px;
    padding-bottom: 7px;
}
.art-DynamicHoverStyle {
    background-image: linear-gradient(rgb(251, 135, 78), rgb(250, 94, 15));
    color: #feebe1;
}
.art-DynamicSelectedStyle {
    background-image: linear-gradient(rgb(255, 69, 69), rgb(255, 5, 5));
    color: #feebe1;
}

    Schon einmal einen riesen großen Dank für eure Hilfe und eure Antworten im voraus.
    Donnerstag, 26. September 2013 18:23
    |

Antworten

  • Question
    Anmelden
    0
    Anmelden

    Bin doch noch fündig geworden. Für alle die es vielleicht interessiert hier die Lösung:

    Beim rendern und anschließenden betrachten des ausgespuckten html-codes werden wie vermutet der selected- und hovered-style nicht berücksichtigt. Lediglich MenuStyle und MenuItemStyle werden berücksichtigt. Um dennoch den hover- und selected- Effekt zu erhalten muss die css-Datei wie auch die aspx-datei angepasst werden. Die hover- und selected-styles werden aus dem asp:menu entfernt und die Klasse art.menu wird eingeführt. Im CSS-Sheet wird der ehemalige hover-style in "art.menu a.static.highlighted" und der selected-style in "art.menu a.static.selected" umbenannt. static ist entsprechend durch dynamic zu ersetzen. So funktioniert's dann auch:

    Code:

    <asp:Menu
	ID="NavigationMenu"
	runat="server"
	Orientation="Horizontal"
	DynamicMenuItemStyle-CssClass="art-DynamicMenuItemStyle"
	DynamicMenuStyle-CssClass="art-DynamicMenuStyle"
	StaticMenuItemStyle-CssClass="art-StaticMenuItemStyle"
	StaticMenuStyle-CssClass="art-StaticMenuStyle" 
	DataSourceID="SiteMapDataSource1"
	CssClass="art-menu"
	StaticDisplayLevels="2" 
	StaticEnableDefaultPopOutImage="False">
</asp:Menu>
<asp:SiteMapDataSource runat="server" ID="SiteMapDataSource1"></asp:SiteMapDataSource>

    CSS-Style:

    .art-menu a.static.highlighted, .art-menu a.dynamic.highlighted {
    background-image: linear-gradient(rgb(251, 135, 78), rgb(250, 94, 15));
    color: #feebe1;
}
.art-menu a.static.selected, .art-menu a.dynamic.selected {
    background-image: linear-gradient(rgb(255, 69, 69), rgb(255, 5, 5));
    color: #feebe1;
}
.art-StaticMenuStyle, .art-DynamicMenuStyle {
    font-family: Calibri, Arial, Verdana;
    font-size: 20px;
    font-weight:800;
    background-color: rgba(0, 0, 0, 0.60);
}
.art-StaticMenuItemStyle {
    background-color: rgba(255, 255, 255, 0.40);
    color: #ffffff;
    height: 24px;
    margin-right: 1px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 7px;
    padding-bottom: 7px;
}
.art-DynamicMenuItemStyle {
    background-color: rgba(255, 255, 255, 0.40);
    color: #ffffff;
    height: 24px;
    padding: 4px;
}


    • Als Antwort markiert weirdsmartguy Freitag, 27. September 2013 17:34
    Freitag, 27. September 2013 17:34
    |