This is a migrated thread and some comments may be shown as answers.

Is there a way to have a sub item template

2 Answers 435 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 06 Jun 2020, 02:35 AM

I'm looking to do some a type of "mega menu" where a given top level menu item has a number of sub items, I'd like to have a different layout, or even a list view for the sub menu template.  I thought maybe using the HasChildrenField set to false would allow me to do something but have not had luck so far.

An example of the type of thing I am talking about can be found here (https://freefrontend.com/css-menu/) in CSS

2 Answers, 1 is accepted

Sort by
0
Chris
Top achievements
Rank 1
answered on 06 Jun 2020, 03:19 AM
Sorry this is a better link to what I am trying to produce: https://freefrontend.com/css-menu/#mega-menu
0
Marin Bratanov
Telerik team
answered on 08 Jun 2020, 02:47 PM

Hi Chris,

Something like the snippet below would be the general approach at the moment. Make sure to check out the comments for a feature that must be implemented before this is viable.

<style>
    /* this first rule will affect ALL animation containers on the page and they are used in many places
    this would let you have a more specific selector:
    https://feedback.telerik.com/blazor/1433654-component-specific-css-classes-and-ability-to-set-classes-per-instance
    */
    .k-animation-container.k-animation-container-shown,
    .k-animation-container .k-menu-item, .k-animation-container .k-menu-link {
        width: 100% !important;
    }
    .k-animation-container .mega-menu-item {
        width: 100%;
        height: 20vh;
        border: 2px solid black;
        background: gray;
    }
        .k-animation-container .mega-menu-item li {
            height: 200px;
            background: yellow;
        }
</style>

<TelerikMenu Data="@MenuItems" ItemsField="SubSectionList">
    <ItemTemplate Context="item">
        @{
            //the mega menu comes from child items and we choose what HTML to render
            //in this example - from separate components for brevity
            if (item.Section.ToLowerInvariant() == "companymegamenu")
            {
                <CompanyMenu />
            }
            else if (item.Section.ToLowerInvariant() == "servicesmegamenu")
            {
                <ServicesMenu />
            }
            else
            {
                <text>@item.Section</text>
            }
        }
    </ItemTemplate>
</TelerikMenu>

@code {
    public List<MenuItem> MenuItems { get; set; }

    public class MenuItem
    {
        public string Section { get; set; }
        public string Page { get; set; }
        public List<MenuItem> SubSectionList { get; set; }
    }

    protected override void OnInitialized()
    {
        MenuItems = new List<MenuItem>()
        {
            new MenuItem()
            {
                Section = "Company",
                SubSectionList = new List<MenuItem>()
                {
                    new MenuItem()
                    {
                        Section = "companymegamenu"
                    }
                }
            },
            new MenuItem()
            {
                Section = "Services",
                SubSectionList = new List<MenuItem>()
                {
                    new MenuItem()
                    {
                        Section = "servicesmegamenu",
                    },
                }
            }
        };

        base.OnInitialized();
    }
}

and the very basic content of the child components that you'd replace with your desired HTML:

<div class="mega-menu-item">
    the company mega menu
    <ul>
        <li>Overview</li>
        <li>Events</li>
        <li>Careers</li>
    </ul>
</div>

and

<div class="mega-menu-item">
    the SERVICES mega menu
    <ul>
        <li>Consulting</li>
        <li>Training</li>
    </ul>
</div>

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Menu
Asked by
Chris
Top achievements
Rank 1
Answers by
Chris
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or