Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Stuart Paterson 57 posts 228 karma points
    May 24, 2018 @ 13:53
    Stuart Paterson
    0

    MegaMenu using MVC method with Bootstrap 4 tabs

    Using Umbraco And Getting Started
    Umbraco 7

    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 1346 posts 4453 karma points c-trib
    May 24, 2018 @ 18:07
    Steve Morgan
    0

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

    Steve

    Copy Link
  • Stuart Paterson 57 posts 228 karma points
    May 29, 2018 @ 13:17
    Stuart Paterson
    0

    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 57 posts 228 karma points
    Jun 04, 2018 @ 13:13
    Stuart Paterson
    100

    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
Please Sign in or register to post replies

Write your reply to:

Draft