Just had a thought?

How come Umbraco.com has a mega menu of sorts, but one cannot be made without some serious time spent on development?

Could Umbraco release this code, or isn't Umbraco built using Umbraco

Cheers

Hi Paul,

What do you mean by mega nav? Just a few drop downs on the main items or multiple columns with images and full whizz bang? It can mean so many different things.

You're best to either build it yourself or find a front end example in flat css / html and then ask how for help to make that into a simple bit of razor.

It's usually fairly easy to implement these things but each one is usually very customised to it's design so there's probably not a generic package if that's what you're looking for?

Basically you just want a site settings node - to add a Mega nav tab / section and then build something up using nested content / blocks.

Steve

I mean a Mega Menu

Not with necessarily with images but with multiple columns. I am not sure that images would make a huge amount of difference.

I really need a drop down with two or three columns. We have a lot of data to display and currently the site is almost impossible to navigate.

We have 2000 pages in reality, split in to 6 main categories, each with around 20 sub cats and each one of those about 10 -15 sub-sub cats

Cheers

Hi Paul

Would this package help you get started?

https://our.umbraco.com/packages/website-utilities/meganavv8/

In terms of letting editors organise which pages to include in the mega nav?

Regards

Marc

I assume you mean something like

I use meganavv8, you will need to write your own template I'm afraid, but it isn't too difficult. I don't have access to the code at the moment so can't post an example until Monday.

I think that I actually only want two columns with a hover drop down.

I have attached an example

MegaNav 8 does not look compatible with Umbraco 8.9

That appears with a hover over the main top menu link

Hi Paul,

I'll try to remove my custom stuff and give you a basic example of what I did, it does use meganav8 though, but the principle would be the same for any construction if you are not able to use meganav, you would just have to query your content pages instead.

It may be tomorrow unfortunately as I have to go out later and not sure how long I will be.

Hi Paul,

Do you want pages to be automatically listed based on your content structure or for a fully flexible but manually edited nav?

Is your site using Bootstrap or any front end frameworks?

Steve

Hi Paul,

I can see from your screenshot that this is actually the demo content of our uSkinned themes. Our themes come with a mega navigation datatype which allows you to create this type of structure. You have complete control over the pages that you want included, internal links, external links, icons etc.

Cheers,

Marc

Hi,

Here's an example to get you started if you want to have full, pickable menu nodes (not all use cases want this as editors have to add pages to the nav manually).

It's based on the first codepen I could find so not sure how good the css is - but you should be able to tailor what's below to any situation.

Firstly create a site settings node if you don't have one already (create the doc type first and allow at root if you don't have one already) and put it in the root of your site.

Now create (or check if you already have a Single Url picker) - this is just a data type using the Multi Url Picker but with max links set to 1. This will be for your top level nav item.

Now create a Doc Type with no template called Nav Item - ensure that you go to Permissions and set this to be an "Element type".

Back to data types and create a new data type Nav Block List

Right now we need to add this to the site settings doc type. So add a new doc type field called "Main Nav" that is of type Nav Block List.

Now you can go add some nav items as content to get us started:

Ok - so now we can add nav items to the content - picking pages and adding a variable number of child links... here's some front end code you can just put in your master template for now (although you should create a partial and put the css in your actual css).

<style>
    body {
        background: #222326;
        font-family: 'Lato', sans-serif;
    }

    #primary_nav_wrap ul {
        left: 0px;
        top: 0px;
        list-style: none;
        position: fixed;
        background: #121314;
        color: white;
        margin: 0;
        padding: 0 display: inline-table;
        width: 100%;
    }

        #primary_nav_wrap ul a {
            display: block;
            color: #9C9C9C;
            text-decoration: none;
            font-weight: 700;
            font-size: 22px;
            line-height: 32px;
            padding: 15px 15px;
            background: #121314;
            font-family: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
            -webkit-transition: all 150ms linear;
            -moz-transition: all 150ms linear;
            -ms-transition: all 150ms linear;
            -o-transition: all 150ms linear;
            transition: all 150ms linear;
        }

            #primary_nav_wrap ul a:hover {
                color: white;
                background-color: #2d2f33;
                text-shadow: 0 0 2px white;
                -webkit-text-shadow: 0 0 2px white;
                -moz-text-shadow: 0 0 2px white;
                -o-text-shadow: 0 0 2px white;
                -ms-text-shadow: 0 0 2px white;
                -webkit-transition: all 150ms linear;
                -moz-transition: all 150ms linear;
                -ms-transition: all 150ms linear;
                -o-transition: all 150ms linear;
                transition: all 150ms linear;
            }

            #primary_nav_wrap ul a:active {
                color: #8ABF29;
                background-color: #2d2f33;
                -webkit-transition: all 50ms linear;
                -moz-transition: all 50ms linear;
                -ms-transition: all 50ms linear;
                -o-transition: all 50ms linear;
                transition: all 50ms linear;
            }

        #primary_nav_wrap ul li {
            position: relative;
            float: left;
            margin: 0;
            padding: 0 background: #121314;
        }

            #primary_nav_wrap ul li.current-menu-item {
                background-color: #222326;
            }

            #primary_nav_wrap ul li:hover {
                background-color: #222326;
            }

        #primary_nav_wrap ul ul {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: #121314;
            padding: 0;
        }

            #primary_nav_wrap ul ul li {
                float: none;
                width: 200px
            }

            #primary_nav_wrap ul ul a {
                line-height: 120%;
                padding: 10px 15px background: #121314;
            }


            #primary_nav_wrap ul ul ul {
                top: 0;
                left: 100%
            }

        #primary_nav_wrap ul li:hover > ul {
            display: block
        }

    div {
        color: #9C9C9C;
        font-size: 22px;
        box-shadow: inset 0 0 0 #222326;
        -webkit-box-shadow: inset 0 0 0 #222326;
        -moz-box-shadow: 0 0 0 #222326;
        -o-box-shadow: 0 0 0 #222326;
        -ms-box-shadow: 0 0 0 #222326;
        padding: 20px;
        -moz-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        transition: all 300ms linear;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        -ms-border-radius: 10px;
        border-radius: 10px;
    }

        div:hover {
            font-size: 22px;
            color: white;
            -webkit-box-shadow: inset 0 0 20px black;
            box-shadow: inset 0 0 20px black;
            -moz-box-shadow: inset 0 0 20px black;
            -o-box-shadow: inset 0 0 20px black;
            -ms-box-shadow: inset 0 0 20px black;
            padding: 20px;
            -webkit-transition: all 300ms linear;
            -moz-transition: all 300ms linear;
            -ms-transition: all 300ms linear;
            -o-transition: all 300ms linear;
            transition: all 300ms linear;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -o-border-radius: 10px;
            -ms-border-radius: 10px;
            border-radius: 10px;
        }

    a {
        color: #9c9c9c;
        -webkit-transition: all 100ms linear;
        -moz-transition: all 100ms linear;
        -ms-transition: all 100ms linear;
        -o-transition: all 100ms linear;
        transition: all 100ms linear;
    }

        a:hover {
            color: white;
            -webkit-transition: all 100ms linear;
            -moz-transition: all 100ms linear;
            -ms-transition: all 100ms linear;
            -o-transition: all 100ms linear;
            transition: all 100ms linear;
        }

    th.dash {
        color: white;
        font-size: 16px;
    }

    .verticalLine {
        border-left: thick solid #ff0000;
    }

    hr.small {
        width: 300px;
        border-color: #8ABF29;
    }
    /*
    hr.small:hover {
    width: 300px;
    border-color: #3498db;
    }
    */
</style>

<nav id="primary_nav_wrap">
    @{

        var siteSettings = Model.Root().Siblings().FirstOrDefault(x => x.ContentType.Alias == "siteSettings");

        var navLinks = siteSettings.Value<IEnumerable<BlockListItem>>("mainNav");
        if (navLinks != null && navLinks.Any())
        {
            <ul>
                @*  to do class="current-menu-item" on any active node *@
                @foreach (var navLink in navLinks)
                {
                    var navLinkContent = navLink.Content as ContentModels.NavItem;
                    if (navLinkContent.Link != null)
                    {
                        if (navLinkContent.ChildLinks.Any())
                        {
                            // nav item with children
                            <li>
                                <a href="@navLinkContent.Link.Url">@navLinkContent.Link.Name</a>
                                <ul>
                                    @foreach (var curChildLink in navLinkContent.ChildLinks)
                                    {
                                        <li><a href="@curChildLink.Url" target="@curChildLink.Target">@curChildLink.Name</a></li>
                                    }
                                </ul>
                            </li>
                        }
                        else
                        {
                            // simple - single item

                            <li><a href="@navLinkContent.Link.Url">@navLinkContent.Link.Name</a></li>
                        }
                    }
                }
            </ul>
        }
    }
</nav>

Credit for front end codepen : https://codepen.io/brandon4117/pen/dnwqH Brandon Loehlein.

is working on a reply...