How to make menu button not clickable in Jekyll

Help
1

Hi there!

The question is related to the menu building. As for now menu is identified in file menus.yml located in _data folder. The structure is the following:

main:
  - name: "page1"
    url: "/page1/"
    sublinks:
    - name: name1
      url: url1.html
      icon: <svg width="32" height="32"... </svg>
      desc: descr1
    - name: name2
      url: url2.html
      icon: <svg width="32" height="32"... </svg>
      desc: descr2
  - name: "page2"
    url: "/page2/"

I need to make page1 button not clickable as there won’t be any page. The idea is to hover on page1 and see the list of sublinks that are clickable (the link of the page1 should be not clickable). If I am simply removing url: “/page1/” the page is still clickable, but it doesn’t redirect me to anywhere.
Can I somehow disable clicks on this button at all?

2

How is your menu generated? A theme, plugin, your own code?

We to know how that works.

A link to a repo and page would help too.

Also if this is an HTML basics issue you can try Google “HTML menu” and then transfer that to Jekyll.

3

I am not so much familar with jekyll, the menu was descried (not by me) in menus.yml located in _data folder

I’ve added the sample. What is the best practice by the way to generate meny in Jekyll? I just thought there is an attribute I can add to the code above to make the page1 not clickable, that it only showed the submenu when hovered on it.

4

Jekyll doesn’t care how you make your site like what html elements you use or if you use classes or a css framework.

Write the html that makes sense for you.

And then use Jekyll to make it dynamic.

Can you share the html result you get as a snippet? Not the Jekyll code to make the menu, the actual rendered HTML.

5

it seems like you are using a theme, can you share if there is something like

theme: jekyll-theme

on your _config.yml file?

7

The file main-menu.html in _includes:

<div class="main-menu-wrapper">
  <nav id="main-menu" class="main-menu">
    {% assign mainmenu = site.data.menus.main | sort: 'weight'  %}
    <ul>
      {% for item in mainmenu %}
        {% if item.sublinks %}
          <li class="main-menu__dropdown-list {{ class }}">
            <a href="{{ item.url | relative_url }}">{{ item.name }}</a>
            <div class="nav-drop-wrap">
              <div class="nav-drop">
                {% for sublink in item.sublinks %}
                  <div class="nav-drop__item">
                      <a href="{{ item.url | relative_url }}{{ sublink.url }}" class="nav-drop__link">
                        <div class="nav-drop__icon">{{ sublink.icon }}</div>
                        <div class="nav-drop__desc">
                          <div class="nav-drop__title">{{ sublink.name }}</div>
                          <div class="nav-drop__text">{{ sublink.desc }}</div>
                        </div>
                      </a>  
                  </div>
                {% endfor %}
              </div>
            </div>
          </li>
        {% else %}
          <li class="{% if item.url == page.url %}active{% endif %}">
            <a href="{{ item.url | relative_url }}">{{ item.name }}</a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </nav>
  <div class="header__tools">
    <ul>
      <li><a href="#">Sign in</a></li>
      <li>
        <div>
          <a href="#" class="header__btn">Sign up</a>
        </div>
      </li>
    </ul>
  </div>
</div>
8

Yes, sure:
theme: minima

9

For where the top level doesn’t have a link to a page, then you just conditionally renfer the out the a tag.

Here always a link. Your code.

<a href="{{ item.url | relative_url }}">{{ item.name }}</a>

Here only a link if link is set in data.

{% if item.url and item.url != '' %}
  <a href="{{ item.url | relative_url }}">{{ item.name }}</a>
{% else %}
  {{ item.name }}
{% endif %}

You just need to add some span or class so you identify that element and use it as a trigger in JS

I think a question is - what do you want it to do, for cases where you do or don’t have a link.

Because for the case where there is a link set, then clicking on that item will take you there and you’ll never see the subitems.

Once approach is that hovering over the item shows subitems (no click needed). And if there is a link available, then make it an a element so it will be clickable or not as in my note above.

The problem is what about on mobile where this is no hover?

Docsify solves it by having the first click on say How To goes to the page and the next click opens the subitems.

https://michaelcurrin.github.io/python-twitter-guide/#/