How to hide child menu html if menu parameter is not set in config.toml

support
1

I have two differently styled child menus built using unordered lists.
menu_example
I’d like to hide the whole blue section of sublinks if the .Param.sublink is not set.

My config.toml is structured as follows:

[[menu.primary]]
    name  = "Products"
    weight = 10

[[menu.primary]]
        parent = "products"
        name  = "Link 1"
        weight = 10

[[menu.primary]]
        parent = "products"
        name  = "Link 2"
        weight = 20

[[menu.primary]]
        parent = "products"
        name  = "Link 3"
        weight = 30

[[menu.primary]]
        parent = "products"
        name  = "SubLink 1"
        weight = 10

        [menu.primary.params]
                    sublink = true

[[menu.primary]]
        parent = "products"
        name  = "SubLink 2"
        weight = 20

        [menu.primary.params]
                    sublink = true

Example HTML:

{{- range .Site.Menus.primary }}
{{ if .HasChildren }}

<div>
    <ul class="linkGroup">
      {{ range .Children }}
      {{ if .Params.sublink }}{{ else }}
          <li>
              <a href="{{ .URL }}">{{ .Name }}</a>
          </li>
      {{ end }}
      {{ end }}
  </ul>
</div>

<ul class="sublinkGroup">
    {{ range .Children }}
        {{ if .Params.sublink }}
            <li>
                <a href="{{ .URL }}">{{ .Name }}</a>
            </li>
        {{ else }}
        {{ end }}
    {{ end }}
</ul>

{{ end }}
{{ end }}

How do I go about hiding/not displaying the whole <ul class="sublinkGroup"> block if no child menus have .Params.sublink?

I’ve tried encapsulating the ul block inside {{ if .Params.sublink }} <HTML>{{ else }}{{ end }} like I have for the range but that doesn’t work. Also tried {{ if isset .Params "sublink" }} in the same manner but that doesn’t work either.

Any ideas? Also open to coding this and entirely different way if I’m going about achieving this in the wrong way.

Thanks.

2

not displaying the whole <ul class="sublinkGroup"> block if no child menus have .Params.sublink

I’m not quite sure I understand what exactly your primary goal is here. It could be the 3 days without sleep though.

Are you looking for something like this?

{{ range .Site.Menus.primary }}
	{{ if .HasChildren }}
		<div>
			<ul class="linkGroup">
				{{ range .Children }}
					{{ if .Params.sublink }}{{ else }}
						<li>
							<a href="{{ .URL }}">{{ .Name }}</a>
						</li>
					{{ end }}
				{{ end }}
			</ul>
		</div>
		{{ if .Params.sublink }}
			<ul class="sublinkGroup">
				{{ range .Children }}
					<li>
						<a href="{{ .URL }}">{{ .Name }}</a>
					</li>
				{{ end }}
			</ul>
		{{ end }}
	{{ end }}
{{ end }}

There is likely a better way to do this; But from your code I wonder if these alterations solve your problem.

3

Thanks for the reply.

I did try this but it doesn’t work. The whole ul block is not shown whether any child menus have .Param.sublink set or not. And I don’t understand why because the code looks logical to me.

P.S. Lack of sleep could well be a factor!

P.P.S. Primary goal is to only show the blue area in the menu if any child menus in the config.toml' have .Param.sublink` set to true.

4

This may be easier to read.

{{ range .Site.Menus.primary }}
	{{ if .HasChildren }}
		<div>
			<ul class="linkGroup">
				{{ range where .Children ".Params.sublink" "!=" true }}
					<li>
						<a href="{{ .URL }}">{{ .Name }}</a>
					</li>
				{{ end }}
			</ul>
		</div>
		{{ if .Params.sublink }}
			<ul class="sublinkGroup">
				{{ range .Children }}
					<li>
						<a href="{{ .URL }}">{{ .Name }}</a>
					</li>
				{{ end }}
			</ul>
		{{ end }}
	{{ end }}
{{ end }}

What would your expected output if you were to add the following to your menu config?

[[menu.primary]]
parent = "products"
name  = "SubLink 3"
weight = 30
5

If I add a 3rd sublink it will look as follows (the menu container is responsive so more sublinks can be added).

menu_example_sub3
menu_example_sub3800×400 26.8 KB

If I manually remove the whole ul block from around the sublinks section. The menu looks like below:
menu_example_no_sublinks
menu_example_no_sublinks800×400 14 KB

I want to code the above as a result if no child menus have .Params.sublink.

6

Thanks for this. Much cleaner.

7

Got it to work!!! Using your where example:

{{ $sublinks := where .Children ".Params.sublink" "=" true }}
{{ if $sublinks }}
	<ul class="sublinkGroup">
		{{ range $sublinks }}
			<li>
				<a href="{{ .URL }}">{{ .Name }}</a>
			</li>
		{{ end }}
	</ul>
{{ else }}
{{ end }}

Thank you so much for your help @RHEV
Again if you (or anyone else thinks there's a better way to achieve this please do comment.)
8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.