Creating sliding menu bar in Hugo & making list pages

support
1

I am using the Tokiwa theme for this project.

here is a link to my repo

On the main page of the site I am trying to create menus that slide down to show subfolders, here is an example from the imperial-library site to show what I mean. You can click on “game books” and then a list opens up that shows all of the available topics for that option. Ex (All, Arena, …) If you click on one of the topics it takes you to a page with a list of all of the entries and a short description of each one. You can then click on the entry to view that post.

In my project my directory is structured

content

writing (Writing has subfolders poem and stories)

So on the home page I would like for someone to be able to click on “writing” then it would slide down to reveal “poems” and “stories”. You could then click on either one of those to view a list page formatted like

description of poem 1 - link to poem 1
description of poem 2 - link to poem 2
description of poem 3 - link to poem 3

I would also like to add this feature to other topics other than writing.

I am asking two questions

  1. How to make the sliding list in Hugo?

I wanted to try to basically copy the html, javascript code from the imperial-library website to create this effect. However, I am unsure of exactly where that would go in the hugo theme? Or other potential issues I would have of formatting this correctly?

  1. How to make the page containing the list of posts?
    I have tried setting up an __index.md page inside of the poems or short stories folder, but currently the poem and short story posts just get linked under writing not in their own list pages.

I would appreciate any input or advice on these issues.

Thank you

2

first steps

define your menus in CONFIG

Look under NESTING how to stack it
I don’t know this theme, the rendering is defined in site-navigation.html

The sliding effect can be done by CSS or JS - off topic here

The listing is defined in layout/index.html

$pages := where site.RegularPages "Type" "in" site.Params.mainSections

You have to define mainSections in CONFIG

hope, this brings you a step up

3

Thank you for your response.

I wasn’t quite able to follow this to get the listing page working correctly.

I have been working on the dev branch of my repo.

I updated config.toml

sectionPagesMenu = "main"

[menu]
  [[menu.main]]
    identifier = "writing"
    name = "writing"
    url = "/writing"
    weight = 1
     [[menu.main]]
    identifier = "post"
    name = "post"
    url = "/post"
    weight = 2
  [[menu.main]]
    identifier = "poems"
    name = "poems"
    url = "/category/poems"
    parent = "writing"
    weight = 1
  [[menu.main]]
    identifier = "stories"
    name = "stories"
    url = "/category/stories"
    parent = "writing"
    weight = 2

and also updated layout/index.html.

{{ define "main" }}
{{ if isset .Site.Params "description" }}
<div class="font-serif text-medium-red-violet-400 pt-3">
	{{ .Site.Params.Description | markdownify }}
</div>
<hr  class="pt-2"/>
{{end}}

<div>
	<section>
		{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
		{{ range (.Paginate $pages 6).Pages }}<div>
			{{ partial "summary.html" . }}
		</div>
		{{ end }}
	</section>
</div>
{{ end }}

{{ define "footer" }}
{{ partial "list-footer.html" . }}
{{ end }}

However, it is still not displaying a list page?

I would appreciate any other input you can provide on this.

4

I had also been trying to follow along with this example posted on a similar forum post, however it also did not display the nested menu.

5

I’m sorry, I am still having a lot of trouble figuring this out. Would you be able to offer any more assistance on this issue?