locked
CSSFriendly Menu with more than three level is not showing correctly RRS feed

  • Question

  • User-447773929 posted

    Hi All, I'm having a problem using CSSFriendly Menu, In my web I was using menu more then 3 level the level 3 and below is all showing together if mouse over the level 2 How to make it showed like the asp.net default? Is there anybody can help? here is the menu using the cssfriendly project, file: SimpleMenu.aspx

    <asp:menu id="EntertainmentMenu" runat="server" maximumdynamicdisplaylevels="1" staticdisplaylevels="1" orientation="Horizontal" onmenuitemclick="OnClick" cssselectorclass="SimpleEntertainmentMenu">
                <items>
                    <asp:menuitem text="Music">
                        <asp:menuitem text="Classical"></asp:menuitem>
                        <asp:menuitem text="Rock">
                        <asp:menuitem text="Electric">
                            <asp:menuitem text="Electric1">
                                <asp:menuitem text="Electric11"></asp:menuitem>
                            </asp:menuitem>
                            <asp:menuitem text="Electric2">
                                <asp:menuitem text="Electric21"></asp:menuitem>
                                <asp:menuitem text="Electric22"></asp:menuitem>
                            </asp:menuitem>
                        </asp:menuitem>
                            <asp:menuitem text="Acoustical"></asp:menuitem>
                        </asp:menuitem>
                        <asp:menuitem text="Jazz"></asp:menuitem>
                    </asp:menuitem>
                    <asp:menuitem text="Movies" selectable="false">
                        <asp:menuitem text="Action"></asp:menuitem>
                        <asp:menuitem text="Drama"></asp:menuitem>
                        <asp:menuitem text="Musical"></asp:menuitem>
                    </asp:menuitem>
                </items>
            </asp:menu>
      

    Thank you

    Thursday, August 7, 2008 12:45 AM

All replies

  • User-1385398420 posted

     You need to add your own CSS specifications (or update those that come with the adapters and recompile) in order to support menus more than three levels deep.

    From the Menu.css file:

    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
    {
        visibility: hidden;
    }
    
    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
    {
        visibility: visible;
    }
    
      
    Thursday, August 7, 2008 11:10 AM
  • User-447773929 posted

    I don't quite understand about to add own spesification, here is the SimpleMenu.css after add the above css:

    .SimpleEntertainmentMenu ul.AspNet-Menu /* Tier 1 */
    {
        width: 13em; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */
    }
    
    .SimpleEntertainmentMenu ul.AspNet-Menu ul  /* Tier 2 */
    {
        width: 6em;
        top: 100%;
        left: 0;
    }
    .SimpleEntertainmentMenu ul.AspNet-Menu ul ul  /* Tier 3+ */
    {
        top: -0.5em;
        left: 6em;
    }
    
    .SimpleEntertainmentMenu li /* all list items */
    {
        width: 6em;
        background: #eeeeee;
    }
    
    .SimpleEntertainmentMenu li:hover, /* list items being hovered over */
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover
    {
        background: Black;
    }
    
    .SimpleEntertainmentMenu a, /* all anchors and spans (nodes with no link) */
    .SimpleEntertainmentMenu span
    {
        color: Black;
        padding: 4px 2px 4px 8px;
        border:1px solid #cccccc;
        background: transparent url(arrowRight.gif) right center no-repeat;
    }
    
    .SimpleEntertainmentMenu li.AspNet-Menu-Leaf a, /* leaves */
    .SimpleEntertainmentMenu li.AspNet-Menu-Leaf span
    {
        background-image: none !important;
    }
    
    .SimpleEntertainmentMenu li:hover a, /* hovered text */
    .SimpleEntertainmentMenu li:hover span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover span,
    .SimpleEntertainmentMenu li:hover li:hover a,
    .SimpleEntertainmentMenu li:hover li:hover span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
    .SimpleEntertainmentMenu li:hover li:hover li:hover a,
    .SimpleEntertainmentMenu li:hover li:hover li:hover span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
    {
        color: White;
        background: transparent url(activeArrowRight.gif) right center no-repeat;
    }
    
    /* Add more rules here if your menus have more than three (3) tiers */
    .SimpleEntertainmentMenu ul.AspNet-Menu li:hover ul ul,
    .SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
    {
        visibility: hidden;
    }
    
    /* Add more rules here if your menus have more than three (3) tiers */
    .SimpleEntertainmentMenu ul.AspNet-Menu li:hover ul,
    .SimpleEntertainmentMenu ul.AspNet-Menu li li:hover ul,
    .SimpleEntertainmentMenu ul.AspNet-Menu li li li:hover ul,
    .SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    .SimpleEntertainmentMenu ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    .SimpleEntertainmentMenu ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
    {
        visibility: visible;
    }
    
    .SimpleEntertainmentMenu li:hover li a, /* the tier above this one is hovered */
    .SimpleEntertainmentMenu li:hover li span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li span,
    .SimpleEntertainmentMenu li:hover li:hover li a,
    .SimpleEntertainmentMenu li:hover li:hover li span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
    {
        color: Black;
        background: transparent url(arrowRight.gif) right center no-repeat;
    }
    
    .SimpleEntertainmentMenu .AspNet-Menu-Selected /* this tier is selected */
    {
        border: solid 1px #00ff00 !important;
    }
    
    .SimpleEntertainmentMenu .AspNet-Menu-ChildSelected /* a tier below this one is selected */
    {
        border: solid 1px #ff0000 !important;
    }
    
    .SimpleEntertainmentMenu .AspNet-Menu-ParentSelected /* a tier above this one is selected */
    {
        border: solid 1px #0000ff !important;
    }
    
    #EntertainmentMessage
    {
        padding-top: 2em;
        clear: both;
    }
    
    .SimpleEntertainmentMenu .static-menu-item
    {
    	background-color:Red;
    }
      

    Here is the full listing of the SimpleMenu.aspx

    <?xml:namespace prefix = asp /><asp:Menu id=EntertainmentMenu runat="server" CssSelectorClass="SimpleEntertainmentMenu" onmenuitemclick="OnClick" Orientation="Horizontal" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1"><asp:MenuItem Text="Music"><asp:MenuItem Text="Classical"><asp:MenuItem Text="Rock"><asp:MenuItem Text="Electric"><asp:MenuItem Text="Electric1"><asp:MenuItem Text="Electric2"><asp:MenuItem Text="Movies" Selectable="false"><asp:MenuItem Text="Action"><asp:Label id=MessageLabel runat="server">

    </asp:Label></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:Menu><asp:Menu runat="server" CssSelectorClass="SimpleEntertainmentMenu" onmenuitemclick="OnClick" Orientation="Horizontal" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1"><asp:MenuItem Text="Music"><asp:MenuItem Text="Classical"><asp:MenuItem Text="Rock"><asp:MenuItem Text="Electric"><asp:MenuItem Text="Electric1"><asp:MenuItem Text="Electric2"><asp:MenuItem Text="Movies" Selectable="false"><asp:MenuItem Text="Action"><asp:Label runat="server"> 

    <%@ Page Language="C#" %>
    
    <script runat="server">
        void OnClick(Object sender, MenuEventArgs e)
        {
            MessageLabel.Text = "You selected " + e.Item.Text + ".";
            e.Item.Selected = true;
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <link rel="stylesheet" href="SimpleMenu.css" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:Menu ID="EntertainmentMenu" runat="server" 
            MaximumDynamicDisplayLevels="1"
            StaticDisplayLevels="1"
            Orientation="Horizontal" onmenuitemclick="OnClick" CssSelectorClass="SimpleEntertainmentMenu">
                <Items>
                    <asp:MenuItem Text="Music">
                        <asp:MenuItem Text="Classical" />
                        <asp:MenuItem Text="Rock">
                        <asp:MenuItem Text="Electric">
                            <asp:MenuItem Text="Electric1">
                                <asp:MenuItem Text="Electric11" />
                            </asp:MenuItem>
                            <asp:MenuItem Text="Electric2">
                                <asp:MenuItem Text="Electric21" />
                                <asp:MenuItem Text="Electric22" />
                            </asp:MenuItem>
                        </asp:MenuItem>
                            <asp:MenuItem Text="Acoustical" />
                        </asp:MenuItem>
                        <asp:MenuItem Text="Jazz" />
                    </asp:MenuItem>
                    <asp:MenuItem Text="Movies" Selectable="false">
                        <asp:MenuItem Text="Action" />
                        <asp:MenuItem Text="Drama" />
                        <asp:MenuItem Text="Musical" />
                    </asp:MenuItem>
                </Items>
            </asp:Menu>
            
            <div id="EntertainmentMessage">
                <asp:Label id="MessageLabel" runat="server" />
            </div>
        </form>
    </body>
    </html>
    
      </asp:Label></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:Menu>

    <asp:Menu runat="server" CssSelectorClass="SimpleEntertainmentMenu" onmenuitemclick="OnClick" Orientation="Horizontal" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1"><asp:MenuItem Text="Music"><asp:MenuItem Text="Classical"><asp:MenuItem Text="Rock"><asp:MenuItem Text="Electric"><asp:MenuItem Text="Electric1"><asp:MenuItem Text="Electric2"><asp:MenuItem Text="Movies" Selectable="false"><asp:MenuItem Text="Action"><asp:Label runat="server">It's still can't be the same as the default menu for more then 3 levels Must I change only the .css that come with the CSSFriendly project or must I change the script in the MenuAdapter.js that come with the project?</asp:Label></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:MenuItem></asp:Menu>

    Friday, August 8, 2008 2:13 AM
  • User-1385398420 posted

     Your post's formatting is off, so I'll try explaining again.

    If you have a menu more than three levels, then you must add additional lines to your CSS. This is what is provided by the default Menu.css:

    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
    {
        visibility: hidden;
    }
    
    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
    {
        visibility: visible;
    }

    You need to add lines as shown below:

    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,
    ul.AspNet-Menu li:hover ul ul ul, /* new */
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul  /* new */
    
    {
        visibility: hidden;
    }
    
    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li li li li:hover ul, /* new */
    ul.AspNet-Menu li li li li li:hover ul, /* new */
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li li.AspNet-Menu-Hover ul, /* new */
    ul.AspNet-Menu li li li li li.AspNet-Menu-Hover ul /* new */
    {
        visibility: visible;
    }
     ... or something to that effect. I haven't tested but seems that would be what you need.
    Friday, August 8, 2008 10:26 AM
  • User-447773929 posted

    I have add it like above but it's still the same

    here is the picture of the menu when mouse over at the 2nd level:

    mouse over

    and here is the picture when mouse over at the 3rd level:

    mouse over 1

    Friday, August 8, 2008 9:54 PM
  • User-1385398420 posted

    It's quite clearly a CSS issue, no necessarily something related specificaly to the CSS adapters (at least not directly). In these situations I tend to try and simplify my CSS, and start adding things one at a time, to try to identify where things are going wrong.

    Monday, August 11, 2008 9:14 AM
  • User-447773929 posted

    thanks for the suggestion

    after trial and error at last the problem is solved

    as you said it is CSS issue, here is the css after the trial that's actually works:

    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,
    ul.AspNet-Menu li li:hover ul ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul ul,
    ul.AspNet-Menu li li li:hover ul ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul ul
    {
        visibility: hidden;
    }
    
    /* Add more rules here if your menus have more than three (3) tiers */
    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li li li li:hover ul,
    ul.AspNet-Menu li li li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li li li.AspNet-Menu-Hover ul
    {
        visibility: visible;
    }
    
     
    Saturday, August 23, 2008 5:03 AM