megamenu using mvc method with bootstrap 4 tabs

Stuart Paterson 58 posts 229 karma points

May 24, 2018 @ 13:53

Hey...hope someone can help or point me in the right direction

I've followed Paul Seal's method to implement and populate a new site MVC site navigation as per the link below.

https://codeshare.co.uk/blog/umbraco-site-navigation-menu-model-example-in-c-mvc/

I created a property to flag nodes in the tree which should show in the navigation and this works. However ultimately I'm looking to take the returned items and split them in to a tabbed mega menu and this is where I'm struggling.

Helper method for this is:

@helper RenderChildItems(List<NavigationListItem> listItems)
{
    if (listItems != null)
    {
        foreach (var item in listItems)
        {
            <li>
                @if (!String.IsNullOrEmpty(item.Text))
                {
                    @item.Text
                }
                else if (item.Link != null)
                {
                    <a href="@item.Link.Url" class="@(Umbraco.AssignedContentItem.Url == item.Link.Url ? "active" : null) @(item.HasChildren ? "fh5co-sub-ddown" : null) nav-link" target="@item.Link.Target">@item.Link.Text</a>
                }

                @if (item.HasChildren)
                {
                            <ul>
                                 <lil>
                                     @RenderChildItems(item.Items)
                                 </lil>
                             </ul>
                }
            </li>
        }
    }
}

I did find this post from Sebastiaan (https://gist.github.com/nul800sebastiaan/1067257) which I think is similar to what I want to do, just can't translate this in to creating new Bootstrap 4 tabs with the returned content.

Col1 in the mega menu would show top tree level, col2 would show child items for each item in Col1 (I have a script which shows the child items in col2 for each col1 item)

I have built a basic html version of this which works, just need some pointers for the MVC version though.

Thanks Stuart

Copy Link

Steve Morgan 1349 posts 4459 karma points c-trib

May 24, 2018 @ 18:07

Post the HTML you're trying to achieve and I'm sure we can help.

Steve

Copy Link

Stuart Paterson 58 posts 229 karma points

May 29, 2018 @ 13:17

Thanks Steve

So far pretty basic, the issue I have is that the child list is showing beneath each parent node. Which to be fair is because that's what the helper method is doing and I'm just rendering that in a ul

        <ul class="navbar-nav">
        <li>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#cont1" aria-haspopup="true" aria-controls="cont1" aria-expanded="false">Individuals</a>
            <div class="flex-container collapse" id="cont1">
                <div id="navcol1" class="flex-row">
                    <div class="flex-column spacer-15">
                        <ul class="nav padding-left">
                            <li class="nav-link">
                                @RenderChildItems(Model)
                            </li>
                        </ul>
                    </div>
            </div>
        </li>
    </ul>

Copy Link

Stuart Paterson 58 posts 229 karma points

Jun 04, 2018 @ 13:13

Got this so I will mark as solved, just had to re-work my helper method for the correct layout. Every day's a school day, for me anyway :)

<nav class="navbar" id="navmd">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#cont1" id="navbarDropdown" aria-haspopup="true" aria-controls="cont1" aria-expanded="false">Individuals</a>
            <div class="navcontainer collapse" id="cont1">
                @RenderChildItems(Model)
            </div>
        </li>
     </ul>
</nav>

@helper RenderChildItems(List<NavigationListItem> listItems)
{
    if (listItems != null)
    {
        foreach (var item in listItems)
        {
                <div class="row">
                    <div class="col-md-4 col-xs-12 vertical-divider">
                        <ul class="nav flex-column padding-left" id="myTab" role="tablist">
                            <li class="nav-item">
                                @if (!String.IsNullOrEmpty(item.Text))
                                {
                                    @item.Text
                                }
                                else if (item.Link != null)
                                {
                                    <a href="#@item.Link.Id" class="@(Umbraco.AssignedContentItem.Url == item.Link.Url ? "active" : null) @(item.HasChildren ? "fh5co-sub-ddown" : null)" target="@item.Link.Target">@item.Link.Text</a>
                                }
                            </li>
                        </ul>
                    </div>
                    @if (item.HasChildren)
                    {
                        <div class="col-md-8 col-xs-12 spacer-15">
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane show" id="@item.Link.Id" role="tabpanel" aria-labelledby="home-tab">
                                    <div class="row">
                                        <div class="col-7">
                                            <ul class="navbar-nav">
                                                <li>
                                                    @RenderChildItems(item.Items)
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-3 margin-top">
                                            <a class="nav-link" href="#">TempLink</a>
                                            <a class="nav-link cipd" href="#">TempLink</a>
                                        </div>
                                        <div class="col-2">
                                            <a class="nav-link" href="#">TempLink</a>
                                            <a class="nav-link" href="#">TempLink</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                </div>
        }
    }
}

Copy Link

is working on a reply...

Flag this post as spam?

MegaMenu using MVC method with Bootstrap 4 tabs