父菜单正下方的菜单样式 [英] Menus styling just below parent menu

问题描述

我必须在asp.net中创建菜单，其样式应类似于

I have to create menu in asp.net their styling should be like

Parent menu1    Parent menu2   Parent menu3
    |                 |             |
    |                 |             |
Chlid Menu1       Chlid Menu2    Child Menu3
     |                |
     |                |
Grand Child       Grand Child
Grand Child

这些菜单项使用XML绑定到asp.net的菜单控件.

These menu items are binded with XML to menu control of asp.net

推荐答案

您好，您可以做一件事.创建一个用户控件，并将以下代码放入:

Hi you can do one thing. Create a user control and put the below code as:

<asp:Menu ID="mnuMainMenu" runat="server" Orientation="Horizontal" MaximumDynamicDisplayLevels="1"

    StaticMenuItemStyle-Width="100%" DynamicEnableDefaultPopOutImage="True" StaticPopOutImageUrl="~/Images/divider.gif"

    CssClass="MyMenuStatic" PathSeparator="," DynamicVerticalOffset="2" DynamicMenuStyle-BorderWidth="1"

    StaticBottomSeparatorImageUrl="Images/seprator-vertical.GIF">
    <StaticHoverStyle CssClass="MyMenuStatic" />
    <StaticMenuItemStyle CssClass="MyMenuStatic" />
    <DynamicMenuItemStyle CssClass="MyMenuDynamic" />
    <DynamicHoverStyle CssClass="MyMenuDynamicHover" />
    <Items>
        <asp:MenuItem Text="Parent menu1" Selectable="true" NavigateUrl="javascript:DoNothing()">
            <asp:MenuItem Text="Chlid Menu1" NavigateUrl="javascript:ChlidMenu1Requirements()">
                <asp:MenuItem Text="Grand Child1" SeparatorImageUrl="~/Images/seprator.gif" NavigateUrl="javascript:GrandChild1()">
                </asp:MenuItem>
                <asp:MenuItem Text="Grand Child2" SeparatorImageUrl="~/Images/seprator.gif" NavigateUrl="javascript:GrandChild2()">
                </asp:MenuItem>
            </asp:MenuItem>
        </asp:MenuItem>
        <asp:MenuItem Text="Parent menu2" Selectable="true" NavigateUrl="javascript:DoNothing()">
            <asp:MenuItem Text="Chlid Menu2" NavigateUrl="javascript:ChlidMenu2Requirements()">
                <asp:MenuItem Text="Grand Child3" SeparatorImageUrl="~/Images/seprator.gif" NavigateUrl="javascript:GrandChild3()">
                </asp:MenuItem>
            </asp:MenuItem>
        </asp:MenuItem>
        <asp:MenuItem Text="Parent menu3" Selectable="true" NavigateUrl="javascript:DoNothing()">
            <asp:MenuItem Text="Chlid Menu4" NavigateUrl="javascript:ChlidMenu2Requirements()">
            </asp:MenuItem>
        </asp:MenuItem>
    </Items>
</asp:Menu>

现在，您需要执行的其他几个步骤
a)找到2个小图像1)分隔符和2)小分隔线
b)菜单样式必须使用CSS

Now few more steps you need to follow
a) find 2 small images 1) separator and 2) small divider
b) menu styling has to be done using css

完成，您应该在javascript中编写您的项目特定要求的代码
supose ur clild菜单之一是用于打开RajesthanRoyalpage的，因此，请相应地编写代码，如果孙子2用于rajesthan皇家队的帐户详细信息"页面，则可以在Java脚本中编写代码以打开该垂直代码...

如果您对重新分析感到满意，请接受回答
Amit

in the javascript you shoud write the code of ur project specific requirement
supose ur clild menu one is for opening RajesthanRoyalpage, so write the code accordingly in that again if grand child 2 is for Account detail page of rajesthan royal team, then in java script u can write the code to open that perticular code...

please accept ans if you r satisfied with resulution
Amit

这篇关于父菜单正下方的菜单样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！