generate menu using anchor links

Philb1208 18 posts 102 karma points

Apr 26, 2017 @ 09:52

Templates, (partial) views and macros

Umbraco 7

Hello,

Is it possible to generate the umbraco menu and insert some anchor links in there dynamically?

I have some pages and content that are part of a one page design such as this

url.com/what-we-do#section1

I'd like to include those anchor links in the drop down menu that is generated with the umbraco navigation macro.

I thought if i altered the macro code to try and add these in it could work but my vb and razor knowledge are bare minimum and i just receive run time errors.

Any help would be much appreciated.

Regards

PhilB

Copy Link

Bhawna Jain 16 posts 96 karma points

Apr 28, 2017 @ 10:21

heya, for starter i would like to suggest using umbraco inbuilt snippets. you can create one for navigation in creating a partial view using a snippet "navigation" which will give you below code. And yes this creates dynamic <a> tag based on number of pages u have in umbraco for level one.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage


@*
    This snippet displays a list of links of the pages immediately under the top-most page in the content tree.
    This is the home page for a standard website.
    It also highlights the current active page/section in the navigation with the css class "current".
*@

@{ var selection = CurrentPage.Site().Children.Where("Visible"); }

<ul>
    @foreach (var item in selection)
    {
        <li class="@(item.IsAncestorOrSelf(CurrentPage) ? "current" : null)">
            <a href="@item.Url">@item.Name</a>
        </li>
    }
</ul>

Copy Link

Philb1208 18 posts 102 karma points

Apr 28, 2017 @ 10:44

Hi Bhawna, thanks for your reply.

Appreciate your help but i dont know if this will allow me to achieve what i am trying.

I've created a partial view which has pulled through a list of my pages which is great. The problem i have is that i have 1 part of that menu that i need to use links like http://domain.com/services#service-1

I have a services page which is populated in my nav menu and initially the content on this page was hosted on individual pages. We have changed this to contain all that content on one page. What i am struggling to do now is insert the links to these anchors within my main menu.

Really, what i need to do is insert something like this:

<ul>
    <li><a href="services#service-1">Link 1</a></li>
    <li><a href="services#service-2">Link 1</a></li>
</ul>

in the main navigation just for that one menu item. The rest of them can be generated based on the pages that are published.

The links point to Anchors in the Umbraco RTE content of the page.

I can see that the link is when i view the source. I need to use the link-id instead of looping through the pages.

I looked at using megaNav plugin from umbraco but couldnt get it to work and would prefer to use as little plugins/addons as possible.

Thanks,

PhilB

Copy Link

Sven Geusens 169 posts 881 karma points c-trib

Apr 28, 2017 @ 16:03

Hey Philb, can you show the code that generates the service page, especially the part where you set the anchors? I have an idea on how you can add the anchors to the menu but I'm not sure if it will work in your setup

Copy Link

Philb1208 18 posts 102 karma points

May 02, 2017 @ 08:56

Hi Sven,

Sorry the delay in getting back to you. I was away all weekend.

do you mean the template HTML itself?

Thanks,

Phil

Copy Link

Sven Geusens 169 posts 881 karma points c-trib

May 03, 2017 @ 08:24

Yup, that is what I mean

Copy Link

Marcio Goularte 374 posts 1346 karma points

May 03, 2017 @ 13:38

For dynamic menu with anchor, I do this:

    @{  var selection = CurrentPage.Site().Children.Where("Visible"); }

    <ul>
        @foreach (var item in selection)
        {
            <li class="@(item.IsAncestorOrSelf(CurrentPage) ? "current" : null)">
                <a href="@(CurrentPage.Url + "#" + item.Id.Tostring())">@item.Name</a>
            </li>
        }
    </ul>

@foreach (var item in selection)
{
    <div id="@item.Id.Tostring()"></div>
}

You can use the ID, umbracoUrlName or Name

Copy Link

Philb1208 18 posts 102 karma points

May 04, 2017 @ 09:12

Hi,

Apologies for the delay.

I'm using a master template here:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
    var home = @CurrentPage.Site();
}

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- Meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="@CurrentPage.siteDescription">

    <title>@CurrentPage.Name | @CurrentPage._siteTitle</title>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- Fonts -->
    <link href="//fonts.googleapis.com/css?family=Merriweather:400,700,300,900" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css">

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/fanoe.css">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="/css/Responsive.css">
    <link rel="stylesheet" type="text/css" href="/css/rte.css">
    <link rel="stylesheet" type="text/css" href="/css/dev-styles.css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
  <div class="container">
    <header>
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-6 col-xs-12">
                    <a href="@home.Url">
                        <div class="brand" style="background-image:url('@(home.SiteLogo)?height=300&width=400')"></div>
                    </a>                    
                </div>

                    <div id="toggle" class="toggle">
                        <a href="#" class="cross"><span></span></a>
                    </div>

                <div class="col-sm-12 col-md-6 livechat">
                    <span class="mdrl1" style="color:white;">Welcome to moordebt.com</span>    
                </div>        
            </div>
        </div>
    </header>
    </div>
    <div class="container">     
        <div class="col-sm-12 col-md-12 layoutNav">
            <nav> 
              @{ Html.RenderPartial("SampleNav"); }
            </nav>
        </div>
    </div>
    @RenderBody()
     <footer class="field dark">
      <div class="container">
        <div class="col-md-12">
          @{ Html.RenderPartial("BottomNavigation"); }
        </div>
      </div>
    </footer>
    <!-- Javascripts -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/scripts/fanoe.js"></script>
  </body>
</html>

The navigation itself is made with the sample that comes with the Fanoe kit (i think)

Menu:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{ var home = CurrentPage.Site(); }

@if (home.Children.Any())
{
    @* Get the first page in the children *@
    var naviLevel = home.Children.First().Level;

    @* Add in level for a CSS hook *@
    <ul class="level-@naviLevel">            
        @* For each child page under the home node *@


        @foreach (var childPage in home.Children)
        {   
            if (childPage.Children.Any())
            {                    
                <li class="has-child @(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
                    @if(childPage.DocumentTypeAlias == "LandingPage") 
                    {
                        <span>@childPage.Name <img src="/media/1113/triangle-down.png" alt="down-arrow" style="height:14px;"></span>


                        @childPages(childPage.Children)
                    } else {
                        <a href="@childPage.Url">@childPage.Name</a>
                    }
                </li>
            } 
            else
            {
                <li class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
                    <a href="@childPage.Url">@childPage.Name</a>
                </li>
            }            
        }
    </ul>
}

@helper childPages(dynamic pages)
{
    @* Ensure that we have a collection of pages *@
    if (pages.Any())
    {
        @* Get the first page in pages and get the level *@
        var naviLevel = pages.First().Level;

        @* Add in level for a CSS hook *@
        <ul class="sublevel level-@(naviLevel)">
            @foreach (var page in pages)
            {
                <li>
                    <a href="@page.Url">@page.Name</a>

                    @* if the current page has any children *@
                    @if (page.Children.Any())
                    {                        
                        @* Call our helper to display the children *@
                        @childPages(page.Children)
                    }
                </li>
            }
        </ul>
    }
}

With WordPress I'd just register a menu then use the prebuilt menu builder. I tried to use a couple of the menu builder plugins for Umbraco but i couldnt get them to work.

Hi Marcio,

Thanks for that. I will give that a try this afternoon and report back,, however Sven i'd still like to hear your suggestion. Either way it is a learning experience.

Thanks,

PhilB

Copy Link

Sven Geusens 169 posts 881 karma points c-trib

May 10, 2017 @ 14:57

Sorry for the late reply, was on Umbraco training the last few days.

I was going to suggest to do something like this ( from your nav script)

@if(childPage.DocumentTypeAlias == "LandingPage") 
                {
                    <span>@childPage.Name <img src="/media/1113/triangle-down.png" alt="down-arrow" style="height:14px;"></span>


                    @childPages(childPage.Children)
                } else {
                    <a href="@childPage.Url">@childPage.Name</a>
                }

in combination with Marcio's answer. Just don't forget to update your helper script as well.

If you stumble upon any errors, just let me know. I think I understand your current setup ;)

Copy Link

is working on a reply...

Flag this post as spam?

Generate menu using anchor links