Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: sub-menus? #448

Open
CarlosGrohmann opened this issue Apr 30, 2023 · 1 comment
Open

Feature request: sub-menus? #448

CarlosGrohmann opened this issue Apr 30, 2023 · 1 comment

Comments

@CarlosGrohmann
Copy link

Description

Is it possible to have sub-menus? Something like About->CV / About->contact

@ayushjain01
Copy link

Hi @CarlosGrohmann, I came up with a way to add submenus.
First, add them in the navigation.yml like this -

  - titles: More
    submenu:
      - title: Page 1
        url: /page1.html
      - title: Page 2
        url: /page-2.html

Next in the header.html file, add the below code -

{%- if _item.submenu -%}
    <li class="navigation__item">
      <a href="{{ _item.url }}">{{ _item.titles }}</a>
      <ul class="submenu">
        {%- for _subitem in _item.submenu -%}
          {%- include snippets/get-nav-url.html path=_subitem.url -%}
          {%- assign _nav_url = __return -%}
          {%- include snippets/get-nav-url.html path=page.url -%}
          {%- assign _page_url = __return -%}
          <li class="navigation__item{% if _nav_url == _page_url or (page.nav_key and _subitem.key and page.nav_key == _subitem.key) %} navigation__item--active{% endif %}">
            <a href="{{ _nav_url }}">{{ _subitem.title | default: __return }}</a>
          </li>
        {%- endfor -%}
      </ul>
    </li>

The else part can have the remaining code.
and to style the header, modify the _header.scss file

.submenu {
  display: none; 
  position: absolute;
  background-color: $header-background;
  list-style: none;
  padding: 0;

  li {
    padding: 0.5rem 1rem; 
  }
}

.submenu:hover {
  display: block; 
}

You can view this at https://github.com/ayushjain01/learn-pip-trends/ for a better understanding.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants