Copied to clipboard

Flag this post as spam?

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


  • Caglar 15 posts 86 karma points
    17 days ago
    Caglar
    0

    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>
    
  • Søren Gregersen 359 posts 1474 karma points MVP 2x c-trib
    17 days ago
    Søren Gregersen
    0

    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 :)

Please Sign in or register to post replies

Write your reply to:

Draft