menus and submenus

 
Hi, What is the best way to implement a nested menu like this [1] in EPiServer? I tried couple solutions, but I have the feeling that there should be a more elegant one. What do you think? [1]
  • menu 1
  • menu 2
  • menu 3
    • sub menu1
    • sub menu2
Thanks, Martin Kulov
#12979 Mar 25, 2008 18:35
  • mg
     
    For a good answer I guess you should take a look at this thread. http://www.episerver.com/en/EPiServer_Knowledge_Center/Developer-Forum2/EPiServer-Developer-Forums-/1805/10965/ In EPiServer CMS the pagetree web control does support an indent/unindent templating, so I guess this kind of structure will be quite easy to create. In EPiServer 4.61 I guess you have to drill down in the example discussed in the link above. Also itemHeader and ItemFooter is supported to allow further modification of each item. Good luck! Mattias Nordgren Sales Engineer
    #15199 Mar 25, 2008 18:46
  •  
    I used a similar function to try to have collapsing menus based on CSS. ascx
  • <%# GetMenuPageName(Container.CurrentPage) %>
  • <%# GetMenuPageName(Container.CurrentPage) %>
  • <%# GetMenuPageName(Container.CurrentPage) %>
  • <%# GetMenuPageName(Container.CurrentPage) %>
  • <%# GetMenuPageName(Container.CurrentPage) %>
  • cs using System; using System.Text; using EPiServer; using EPiServer.Core; namespace Unctad.Web.Templates.Units { /// /// Summary description for TopMenu. /// public partial class TopMenu : UserControlBase { public EPiServer.WebControls.MenuList MenuListControl { get { return epiMenu; } } private void Page_Load(object sender, EventArgs e) { if(!IsPostBack) MenuListControl.DataBind(); //ucPageLink.PropertyName = CurrentPage.PageName; } protected PageReference MenuRoot // This should be the container reference to each item in the global menu. { get { if(CurrentPage["MainMenuContainer"] != null) return (PageReference)CurrentPage["MainMenuContainer"]; else return Configuration.StartPage; } } public string PullDownMenus() { StringBuilder htmlString = new StringBuilder(50); htmlString.Insert(0, "
      " + Server.HtmlEncode(CurrentPage.PageName)); PageReference parentReference = MenuRoot; // The parent reference should be the first child in the global navigation. // Here should be an iteration of the all the first level sons of the global navigation. while (parentReference != PageReference.EmptyReference) { PageData childPage; childPage = GetPage(parentReference); htmlString.Insert(0, "
    • "); htmlString.Insert(0, CreatePageLink(childPage)); htmlString.Insert(0, "
    • "); parentReference = MenuRoot; // The parent reference should then change to the second child and so on. } htmlString.Insert(0, "
    "); return htmlString.ToString(); } protected static string GetMenuPageName(PageData pd) { return pd["varMenu"] != null ? (string)pd["varMenu"] : (string)pd["PageName"]; } private String CreatePageLink(PageData pageObject) { String pageDisplayName; pageDisplayName = pageObject.PageName; return "
    CSS /*-- drop down menus:mod -- */ #drpdncontainer {} /* holds menus for positioning*/ #topmenu div {} /* holds menus for positioning*/ #drpdn, #drpdn ul {} #drpdn a {width:15em;text-decoration:none;color:#fff;} /* width needed or else Opera goes nuts */ #drpdn a:hover {color:#1f4478;background:#fff;} #drpdn li {text-transform:none !important;} /* all list items;width needed or else Opera goes nuts */ #drpdn li a {} #drpdn li ul {width:15em;text-align:left;background:#1f4478;} /* second-level lists */ #drpdn li ul li {width:15em;border-bottom:1px solid #999;} /* second-level lists */ #drpdn li ul li a {width:15em;font-size:11px;font-weight:normal;padding:5px 0 0 5px;border-right:none;} /* second-level lists */ #drpdn li:hover ul {} #drpdn li ul ul {margin:-1em 0 0 15em;} /* third-and-above-level lists */ #drpdn li:hover ul ul, #drpdn li.sfhover ul ul {} #drpdn li:hover ul, #drpdn li li:hover ul, #drpdn li.sfhover ul, #drpdn li li.sfhover ul {}/* lists nested under hovered list items */
#15200 Mar 25, 2008 18:46
  • Ganesan Sankaran
    Member since: 2007
     

    http://www.episerver.com/en/EPiServer_Knowledge_Center/Developer-Forum2/EPiServer-Developer-Forums-/1805/10965/

    The above link is not working. It would be more helpful if you give the right link.

    #31280 Jul 17, 2009 12:53
  • Naveed
    Member since: 2008
     

     

    Hi,

    I had a similar situation. Consider the following page structure

     

    Product
        Product Category 1
            Product 1.1

        Product category 2
            Product 2.1
            Product 2.2

     

    All I am using is Episerver:Pagelis control as following.

     

     

    <EPiServer:PageList runat="server" PageLinkProperty="ProductStartPageId"  SortOrder="Index" ID="ProductStartPage >


    <HeaderTemplate> <h3>Product</h3>

    <!-- Product Heading -->

    <EPiServer:Property ID="PropertyProductHeading" PropertyName="PageLink"  runat="server" />




    <ul>

    </HeaderTemplate>

    <ItemTemplate><li>

        <!-- Display product category -->
         <EPiServer:Property ID="Property1" PropertyName="PageName" runat="server" />
         
        <!-- Display child of that product category -->
        <EPiServer:PageList runat="server" PageLink="<%# Container.CurrentPage.PageLink %>  "  SortOrder="Index" ID="ProductChildStartPage" >
            <HeaderTemplate><ul></HeaderTemplate>
        <ItemTemplate><li><EPiServer:Property ID="Property1" PropertyName="PageLink" runat="server" /></li></ItemTemplate>
        <FooterTemplate></ul></FooterTemplate>
        </EPiServer:PageList>

    </li>
    </ItemTemplate>



    <FooterTemplate></ul></FooterTemplate>


    </EPiServer:PageList>


    I have created ProductStartPageId as a dynamic property through admin and assigned it the starting page value and used it in the control.

     

    No other custom work required !!!

     

     

    #31378 Jul 24, 2009 0:55