Expand/Colaps Menu options

[justinrummel]

• This is a question about using the theme.
• I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.
• This is a feature request.
• I have updated all gems with bundle update.
• I have tested locally with bundle exec jekyll build.

---

Environment informations

• Minimal Mistakes version:
• github-pages or jekyll gem version:
• Operating system:

---

Enhancement Request

I know there is an existing enhancement for the sidebar but wanted to see if the same concept/idea could be applied to the top Masthead Menu items. I've got a quick framework, but the .js / .css "magic" to make things expand and collapse without adjusting the main content area... I have no idea.

masthead.html

<div class="masthead">
  <div class="masthead__inner-wrap">
    <div class="masthead__menu">
      <nav id="site-nav" class="greedy-nav">
        <a class="site-title" href="{{ '/' | absolute_url }}">{{ site.title }}</a>
        <ul class="visible-links">
          {% for link in site.data.navigation.main %}
            {% if link.children != null %}

              <li class="masthead__menu-item"><a href="#">{{ link.title }}</a>
                <ul>
                  <!-- 2nd level -->
                  {% for child in link.children %}
                    <li class="masthead__menu-item"><a href="{{ child.url | absolute_url }}">{{ child.title }}</a></li>
                  {% endfor %}
                </ul>
              </li>

            {% else %}
              {% if link.url contains 'http' %}
                {% assign domain = '' %}
              {% else %}
                {% assign domain = site.url | append: site.baseurl %}
              {% endif %}
              <li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
            {% endif %}
          {% endfor %}
        </ul>
        <button><div class="navicon"></div></button>
        <ul class="hidden-links hidden"></ul>
      </nav>
    </div>
  </div>
</div>

navigation.yml

  - title: About
    url: /about/

  - title: Archives
    url:
    children:
      - title: "Posts Archive"
        url: /posts/
      - title: "Tag Archive"
        url: /tags/
      - title: "Category Archive"
        url: /categories/

[mmistakes]

I'll have to give this some thought as I didn't really want to build a nav with any sort of hierarchy. That's why I purposely went with the "greedy nav" pattern that is fairly flat.

I'm not entirely sure how it would work combining the two, and would likely get messy.

[justinrummel]

No worries... the multiple "Archive" methods was just bothering me. I may think of another way to get to these pages but not in the main Masthead.

[mmistakes]

I've done it exactly how you broke down the data file above with children objects. It's not terribly hard and there's plenty of tutorials out there that you could lift the CSS/JS to make it work.

I would just rip out the entire GreedyNav script and CSS and start from scratch as you'll be fighting it otherwise.

[justinrummel]

Just using what is provided. Closing request.