Hugo Ananke Drop-up Menu

I don’t pretend to be a CSS guru, but I know what works and what doesn’t. I needed to add a drop-up menu to the footer in my Ananke themed Hugo static code. There is no native feature baked into the theme, and unfortunately it is theme specific. Here are the steps I took to produce the footer resume menu for www.zachcalvert.com.

First, the menu addition goes in “hugo.toml”. For my example, I wanted a resume menu tailored to the resumes I’m currently submitting. I suspect there are more tailored resumes coming:

[[menus.footer]]
identifier = "resumes"
name = 'Resumes'
weight = 10

[[menus.footer]]
parent = "resumes"
identifier = "cybersecurity"
name = 'Cybersecurity'
url = '/zachcalvert_cs.pdf'
weight = 1

[[menus.footer]]
parent = "resumes"
identifier = "ai"
name = 'AI Strategist'
url = '/zachcalvert_ai.pdf'
weight = 2

[[menus.footer]]
parent = "resumes"
identifier = "dso"
name = 'DevSecOps'
url = '/zachcalvert_dso.pdf'
weight = 3

Do note that the “identifier” is needed for the child elements to establish a link to the parent menu item.

Get Zach Calvert’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Next, the CSS customization ALSO goes into hugo.toml. Older documentation pointed to an edit for “params” but the newer versions of Hugo are “params.<theme>”. For the Ananke theme, this is the configuration element for hugo.toml:

[params.ananke]
custom_css = ["css/custom.css"]

For the custom.css placed at “static/css/custom.css”, basic shadowed drop-up that works for browsers and iOS devices:

/* Footer dropup menus */
.dropup {
  position: relative;
  display: inline-block;
}

.dropup-btn {
  background-color: transparent;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.dropup-btn:hover {
  color: rgba(255, 255, 255, 1);
}

.dropup-content {
  display: none;
  position: absolute;
  left: 0;

  bottom: 100%; 
  background-color: rgba(255, 255, 255, 1);
  min-width: 160px;
  box-shadow: 0px -8px 16px 0px rgba(0,0,0,0.2); /* Shadow goes up */
  border-radius: 12px; 
  z-index: 1;
}

/* Style the links inside the menu */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  display: flex;
  justify-content: center; /* Horizontally centers */
  align-items: center;     /* Vertically centers */
}

/* Change color of links on hover */
.dropup-content a:hover {
  background-color: #ddd;
  border-radius: 12px; 
}

/* Show the menu when hovering over the container */
.dropup:hover .dropup-content {
  display: block;
}

Finally, the template update. I copied the “site-header.html” out of the “themes/ananke/layouts/_partials/site-footer.html” and put the copy in “layouts/_partials/site-footer.html”. The guts of the file were updated to combine some hard-coded links with the menu content for easy configuration:

<footer class="{{ .Site.Params.background_color_class | compare.Default "bg-black" }} bottom-0 w-100 pa3" role="contentinfo">
<div class="flex justify-between">

<div>
<a class="f4 fw4 hover-white white-70 dn dib-ns pv2 ph3 no-underline" href="{{ .Site.Home.Permalink }}" >
    &copy; {{ with .Site.Copyright | compare.Default .Site.Title }} {{ . | safe.HTML }} {{ now.Format "2006"}} {{ end }}
</a>
<a class="fw4 hover-white white-70 no-underline" href="https://github.com/ZacharyCalvert/do-www_zachcalvert_com" target="_blank">Site Code</a> | 
<a class="fw4 hover-white white-70 no-underline" href="https://a.co/d/0ihitHBG" target="_blank">My Book</a>

      {{ range .Site.Menus.footer }}
        {{ if .HasChildren }}
        <div class="dropup">
          | <button class="dropup-btn">
            {{ .Name }}
          </button>
            <div class="dropup-content">
                {{ range .Children }}
                    <a href="{{ .URL }}">{{ .Name }}</a>
                {{ end }}
            </div>
        </div>
        {{ else }}
          | <a class="fw4 hover-white white-70 no-underline" href="{{ .URL }}">
            {{ .Name }}
          </a>
        {{ end }}
      {{ end }}
</div>

    <div>{{ partials.IncludeCached "social/follow.html" . }}</div>
</div>
</footer>

Which produces the resume menu at the bottom of my www.zachcalvert.com site. The site code in its entirety are available at https://github.com/ZacharyCalvert/do-www_zachcalvert_com with this exact content committed to the 1.0.0 tag.

Direct file links:

• custom.css
• hugo.toml
• site-header.html

Happy crafting!