1

asp：Menuの設定に問題があります。cssを使用すると、メニュー項目が選択されなくなります。私は3つのバージョンを試しましたが、それぞれに欠点があります。

これはcssに最適ですが、選択したアイテムは選択されません。

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

これは選択されたものを示していますが、メニュー項目の背景として画像を使用することはできません。cssを追加すると、選択範囲が表示されなくなります。そして、サブアイテムは常に存在します。

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

メニューアイテムの背景として画像を表示し、その上にテキストを表示する方法と、魔女アイテムを表示する方法の両方を選択するにはどうすればよいですか。

ありがとう。

アップデート

これに付随するCSSは次のとおりです。

.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;
}

これらも設定しようとしましたが、実際に選択されている項目に関係なく、最初の項目のみが選択されたままになります。

<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>
4

1 に答える 1

1

.aspxページを実行してソースを調べると、メニュー項目（ハイパーリンク）タグにa.selected.static<a>という選択されたクラスがあることがわかります。コードにこれの独自のバージョンを実装し、に適用することでオーバーライドできます。 CSSクラス。!important

以下のサンプルは、画像メニュー項目を含む単純なメニューを表示し、選択すると赤い境界線で画像を強調表示します。

<head runat="server">
    <title>Menu</title>
    <style type="text/css">
        a.selected.static
        {
            border:2px solid red !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
        <Items>
            <asp:MenuItem ImageUrl="~/Images/1.jpg" Text="Item 1" />
            <asp:MenuItem ImageUrl="~/Images/2.jpg" Text="Item 2" />
            <asp:MenuItem ImageUrl="~/Images/3.jpg" Text="Item 3" />
        </Items>
    </asp:Menu>
    </form>
</body>
于 2012-11-14T20:30:44.757 に答える