Creating a menu navigation list that changes content on the same page

support
1

Hello!

I am trying to create a sort of a menu,
where On the side I have a list of items, these items are derived from
a content folder where there can be multiple .md files,
now each .md file would have some Content and a Picture with it, so the .md
frontmatter would look something like this:

---
title: Item1 
img: /smth
---

## This is the content of the product!

To visually represent this better, I have created this jsfiddle

How could I re-create this in hugos templating language?

This would work on one page, problem is is that I need a bit of guidance, a helping hand, how do I render the items from my “Items” folder into that list, and get the item to be connected with its description?

Thank you.

EDIT3:

After a little bit of rigurous testing, I found a way to fetch all of my items from my folder into my list, inside of list.html I made this little function:

				{{ range $.Page.Pages }}
				<li class="custom-list-item">
					<a href="#">
				     {{ .Param "title" }}
					</a>
				</li>
				{{ end }}

now, to the bigger problem, how do I Activate an Item from said list and display its contents into a description box=?

Edit4:

I found this article which basically is what I am trying to do, but my Nav list would then be held inside my partners/_index.md frontmatter, they dont really explain how I can do the same nav with .md frontmatter like they do with the config file.

2

I think that it would be best if you could share a sample repo for us to see the files and templates structure of your project.

3

Here is the project I am working : https://github.com/EricTalv/elk

The exact file I am working inside would be in layouts/_default/list.html

4 
                                {{ range $.Page.Pages }}
				<li class="custom-list-item">
					<a href="#">
				     {{ .Param "title" }}
					</a>
                                 <--- description box HTML --->
                                 {{ .Param "img" }}
				</li>
				{{ end }}

Within the needed HTML structure you simply call the description box parameters as you are already calling the title parameter.

Then you show/hide the description box on the frontend either with JS or CSS or by adapting what you have in the JSFiddle link.

5

I think youve misunderstood.

My description content would lie in a different area outside of the {{ range }} function,
So I would need to create logic that would see what the currentPage is, so if its just the List page then nothing from the nav list would be selected, and upon pressing on one of the nav Items, I need to add an Active class And insert the content of chosen item to where I need it to be.

So what exactly im struggling with is the Templating language, On my site i have this bit of logic:

 {{ $showActiveNav := .Site.Params.showActiveNav }}
     {{ $currentPage := . }}
     {{ range .Site.Menus.nav }}
       {{ $active := "" }}
       {{ if eq $showActiveNav true }}

         {{ $isMenu := or ($currentPage.IsMenuCurrent "nav" .) ($currentPage.HasMenuCurrent "nav" .) }}
         {{ $isMenu = or $isMenu (eq $currentPage.Params.identifier .Identifier) }}
         {{ $isMenu = or $isMenu (eq $currentPage.Title .Name) }}

        {{ if $isMenu }} 
         {{ $active = "nav-link-active" }}
        {{ end }}  
       {{ end }}  
       {{ $icon := printf "<i data-feather=\"%s\"></i>" .Pre }}
       {{ $text := print $icon " " .Name | safeHTML }}
       <li class="nav-item ">
         <a id="c-a" class="nav-link {{ $active }} " href="{{ .URL }}">{{ $text }}</a>
       </li>
     {{ end }}

This came along with my site theme and basically does what I need, but I am having a hard time understanding how it exactly works, additionally, it uses the Config file, what Im thinking is i could craft a simular system into my partners/_index.md where I would define a Nav list, and then i could range all the items from there, and additionally get the url’s aswell.

I basically want to recreate the jsfiddle in the hugos templating language.

6

When a sample repo is requested it needs to reflect the project structure, precisely.

Describing things is not good enough.

With that said you need to have a look at the .GetPage function to get the Descriptions from outside the Hugo Menu context. Also the Description needs to have some kind of a common identifier with the respective Menu Item.

7

If I try to add the said code into my list.html i get this error
at here

{{ $isMenu := or ($currentPage.IsMenuCurrent "nav" .) ($currentPage.HasMenuCurrent "nav" .) }}

executing "main" at <.>: wrong type for value; expected *navigation.MenuEntry; got *hugolib.pageState
8

So If i just use this:

	{{ range $.Page.Pages }}
					<li class="custom-list-item ">
						<a href="{{ .URL }}">
							{{ .Title }}
						</a>
					</li>
	{{ end }}

By pressing on one of the nav links it takes me to a seperate page, but I want it to change the content while inside the list.html page,