Display submenus as dropdows in the top menu level

[jiba....@gmail.com]

Hello, I am trying to achieve the result that is shown on the image on the link below.

https://ibb.co/ePXPx9

How can i do that with Kaliko ???

Please advise

[Fredrik Schultz]

Hello,

You can use the Html.MenuTreeFor helper to build a menu tree:

@using KalikoCMS.Mvc.Extensions

@Html.MenuTreeFor(Model.CurrentPage, PageFactory.GetPage(Guid.Empty), new { @class = "nav nav-pills nav-stacked", selectedItemClass = "active" })

You'll find more information about this helper in the documentation here.

(If you're using WebForms there's an equivalent user control) 

Hope that helps!

[David Ferreira]

How to do it without razor or mvc, just webform with asp.net ?

[Fredrik Schultz]

Here's a sample on how to build a drop down menu using the MenuList controller in WebForms:

<cms:MenuList ID="TopMenu" AutoBind="True" runat="server">

    <HeaderTemplate>

        <ul class="navbar-nav ml-auto">

    </HeaderTemplate>

    <ItemTemplate>

        <asp:Panel runat="server" Visible="<%#!Container.CurrentPage.HasChildren %>">

            <li class="nav-item">

                <a class="nav-link"><%#Container.CurrentPage.PageName %></a>

            </li>

        </asp:Panel>

        <asp:Panel runat="server" Visible="<%#Container.CurrentPage.HasChildren %>">

            <li class="nav-item dropdown">

                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink<%#Container.CurrentPage.PageId %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><%#Container.CurrentPage.PageName %></a>

                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink<%#Container.CurrentPage.PageId %>">

                    <cms:MenuList AutoBind="True" DataSource="<%#Container.CurrentPage.Children %>" runat="server">

                        <ItemTemplate>

                            <a class="dropdown-item" href="<%#Container.CurrentPage.PageUrl %>"><%#Container.CurrentPage.PageName %></a>

                        </ItemTemplate>

                    </cms:MenuList>

                </div>

            </li>

        </asp:Panel>

    </ItemTemplate>

    <FooterTemplate>

        </ul>

    </FooterTemplate>

</cms:MenuList>

Hope that helps!

[David Ferreira]

you solution is not helping, because the root menu is hidding and only shows in a vertical way the submenus. Can you do an exemple?

[David Ferreira]

a found a nasty solution but it works

<cms:MenuList ID="NavMenu" AutoBind="true" PageLink="<%#KalikoCMS.Configuration.SiteSettings.RootPage %>" runat="server">
    <HeaderTemplate>
        <ul data-type="navbar" class="sf-menu">
    </HeaderTemplate>
        <ItemTemplate>
            <li class="nav-item dropdown" style="<%# !Container.CurrentPage.HasChildren ? "display:none" : "display:normal" %>">

                <a  class="nav-link dropdown-toggle" id="navbarDropdownMenuLink

<%#Container.CurrentPage.PageId %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><%#Container.CurrentPage.PageName %></a>
                <ul class="sf-menu">

                    <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink

<%#Container.CurrentPage.PageId %>">

                        <cms:MenuList AutoBind="True" DataSource="

<%#Container.CurrentPage.Children %>" runat="server">
                                <HeaderTemplate>
                                                       
                            </HeaderTemplate>

                            <ItemTemplate>
                                <a class="dropdown-item" href="<%#Container.CurrentPage.PageUrl %>"><%#Container.CurrentPage.PageName %></a>
                            </ItemTemplate>
                        </cms:MenuList>
                    </div>

                </ul>
            </li>
            <li style="<%# Container.CurrentPage.HasChildren ?  "display:none" : "display:normal" %>">
                <a href="<%#Container.CurrentPage.PageUrl %>"><%#Container.CurrentPage.PageName %></a>
            </li>

[Fredrik Schultz]

Another approach could be to use the MenuTree controller:

<cms:MenuTree ID="TopMenu" AutoBind="True" runat="server">

    <NewLevelTemplate>

        <ul>

    </NewLevelTemplate>

    <StartItemTemplate>

        <li class="item<%#Container.CurrentPage.HasChildren && Container.CurrentPage.TreeLevel == 0 ? "  dropdown" : "" %>  level-<%#Container.CurrentPage.TreeLevel %>">

    </StartItemTemplate>

    <ItemTemplate>

        <a class="item-link<%#Container.CurrentPage.HasChildren && Container.CurrentPage.TreeLevel == 0 ? "  dropdown" : "" %>" href="<%#Container.CurrentPage.PageUrl %>"><%#Container.CurrentPage.PageName %></a>

    </ItemTemplate>

    <EndItemTemplate>

        </li>

    </EndItemTemplate>

    <EndLevelTemplate>

        </ul>

    </EndLevelTemplate>

</cms:MenuTree>      

And from your code behind fetch the number of levels you are interested in (first two in the sample below):

        protected override void OnLoad(System.EventArgs e) {

            base.OnLoad(e);

            TopMenu.DataSource = PageFactory.GetPageTreeFromPage(SiteSettings.RootPage, x => x.TreeLevel < 2);

            // ...

        }

This approach requires a couple of conditional checks to be added, but you only need to render each node once.