Hi,
I am trying to create 3 or 4 level nested sidebar menu. I am Using Techdoc Theme.
I am using this below code:
{{$currentNode := .}}
<nav>
<ul>
{{- if eq .Site.Params.ordersectionsby "title" -}}
{{- range .Site.Home.Sections.ByTitle -}}
{{template "menu" dict "sect" . "currentnode" $currentNode}}
{{- end -}}
{{- else -}}
{{- range .Site.Home.Sections.ByWeight -}}
{{template "menu" dict "sect" . "currentnode" $currentNode}}
{{- end -}}
{{- end}}
</ul>
</nav>
{{define "menu"}}
{{- $currentNode := .currentnode -}}
{{ with .sect }}
{{ if .IsSection }}
{{ if in .Site.Params.menu_exclusion .Section }}
{{- else -}}
{{- safeHTML .Params.head -}}
{{- $numberOfPages := (add (len .Pages) (len .Sections)) -}}
<li class="{{ if .IsAncestor $currentNode }}parent{{ end }}{{ if eq .UniqueID $currentNode.UniqueID }} active{{ end }}{{ if .Params.alwaysopen }} parent{{ end }} ">
<a href="{{ if $currentNode.Params.noLink}}javascript:void(0);{{else}}{{ .URL }}{{end}}" class="clickable panel-collapsed">{{ safeHTML .Params.Pre }}{{ .Title }}{{ safeHTML .Params.Post }}
<!-- If the section has children, and down arrow if active, right arrow otherwise -->
{{- if ne $numberOfPages 0 -}}
{{- if eq $currentNode.CurrentSection . -}}
<i class="fa fa-angle-down"></i>
{{- else -}}
<i class="fa fa-angle-right"></i>
{{- end -}}
{{- end -}}
</a>
{{- if and (ne $numberOfPages 0) (eq $currentNode.CurrentSection .) -}}
<ul class="{{ if .IsAncestor $currentNode }}sub-menu{{ end }}">
{{- .Scratch.Set "pages" .Pages -}}
{{- if .Sections -}}
{{- .Scratch.Set "pages" (.Pages | union .Sections) -}}
{{- end -}}
{{- $pages := (.Scratch.Get "pages") -}}
{{- if eq .Site.Params.ordersectionsby "title" -}}
{{- range $pages.ByTitle -}}
{{- if and .Params.hidden (not $.showhidden) -}}
{{- else -}}
{{template "menu" dict "sect" . "currentnode" $currentNode}}
{{- end -}}
{{- end -}}
{{- else -}}
{{- range $pages.ByWeight -}}
{{- if and .Params.hidden (not $.showhidden) -}}
{{- else -}}
{{template "menu" dict "sect" . "currentnode" $currentNode}}
{{- end -}}
{{- end -}}
{{- end}}
</ul>
{{end}}
</li>
{{- end -}}
{{- else -}}
{{- if not .Params.Hidden -}}
<li class="{{ if eq .UniqueID $currentNode.UniqueID }}active{{ end }}"><a href="{{ if $currentNode.Params.noLink}}javascript:void(0);{{else}}{{ .URL }}{{end}}" >{{ safeHTML .Params.Pre }}{{ .Title }}{{ safeHTML .Params.Post }}</a></li>
{{- end -}}
{{ end -}}
{{ end -}}
{{ end }}
This Code is not working.
I am looking for output look like below:
<ul>
<li><a href="#">Nav Link1</a></li>
<li><a href="#">Nav Link2</a>
<ul class="sub-menu">
<li><a href="#">Sub Nav1</a>
<ul class="sub-menu">
<li><a href="#">Sub Sub Nav1</a></li>
<li><a href="#">Sub Sub Nav2</a></li>
<li><a href="#">Sub Sub Nav3</a>
<ul class="sub-menu">
<li><a href="#">Sub Nav1</a></li>
<li><a href="#">Sub Nav2</a></li>
<li><a href="#">Sub Nav3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Sub Nav2</a></li>
<li><a href="#">Sub Nav3</a></li>
</ul>
</li>
<li><a href="#">Nav Link3</a></li>
<li><a href="#">Nav Link4</a></li>
</ul>
Can anybody help me to get above output…