how can send href link to sections id in anchor menu - Using Umbraco and getting started

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Caglar 23 posts 94 karma points

Apr 04, 2021 @ 14:26

How can send href link to sections id in anchor menu?

Hi all,

I want create a anchor menu. Firstly I created navigation menu without problem. Now I am creating pages inclued sections, my question is how can I send href link to sections id in anchor menu?

My menu code is below

<header>
<div class="container">
    <div class="header-flex-wrapper">
        <div class="h-left-wrapper">
            <div class="header-logo">
                <a href="@site.Url()">
                    <img src="@generalSettings.WebSiteLogo.Url"
                         alt="UmbracoTemplate" />
                </a>
            </div>
        </div>
        <button class="navbar-toggler hamburger hamburger--minus"
                type="button">
            <span class="hamburger-box">
                <span class="hamburger-inner"></span>
            </span>
        </button>
        <div class="mobile-toggle-div">
            <nav>
                <ul>
                    @foreach (var item in selection)
                    {
                        var menu = item.Value<IEnumerable<IPublishedElement>>("subMenus");
                        var subMenuList = menu.Select(n => n.Value<IEnumerable<Link>>("subMenuLinks"));

                        if (subMenuList.Count() > 0)
                        {

                            foreach (var submenu in subMenuList)
                            {
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true">@item.Name</a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                        @foreach (var sub in submenu)
                                        {
                                            <a class="dropdown-item" href="/@item.UrlSegment#@sub.Url">@sub.Name</a>
                                        }
                                    </div>
                                </li>
                            }
                        }
                    }
                </ul>
            </nav>
        </div>
    </div>
</div></header>

Copy Link

Søren Gregersen 441 posts 1884 karma points MVP 2x c-trib

Apr 04, 2021 @ 21:04

Hi,

Are you trying to create a single page with all the content, or just creating links to the pages?

The line:

<a class="dropdown-item" href="/@item.UrlSegment#@sub.Url">@sub.Name</a>

Should be

 <a class="dropdown-item" href="#@sub.Url">@sub.Name</a>

this would let the page scroll to the anchor, on the current page.

To display an element with the same id as the anchor, you would need to traverse your selection the same way as you already have in the menu, but render a container for each page, like so

                @foreach (var item in selection)
                {
                    var menu = item.Value<IEnumerable<IPublishedElement>>("subMenus");
                    var subMenuList = menu.Select(n => n.Value<IEnumerable<Link>>("subMenuLinks"));

                    if (subMenuList.Count() > 0)
                    {

                        foreach (var submenu in subMenuList)
                        {
                             @foreach (var sub in submenu)
                                    {
                                        <div id="@sub.Url">RENDER CONTENT HERE</div>
                                    }
                        }
                    }
                }

Just doing links to the actual pages might just be easier, then The line:

<a class="dropdown-item" href="/@item.UrlSegment#@sub.Url">@sub.Name</a>

Should just be

 <a class="dropdown-item" href="@sub.Url">@sub.Name</a>

I hope I understood your question right, and the above helps :)

Copy Link

is working on a reply...

Please Sign in or register to post replies