Backend

Name

Tipo

Descrizione

Codice blocco

HTML template

<div id="club-public-menu-wrapper" class="{{ content.classes }}">
<div id="club-public-menu">
<a href="{{ content.logo_link }}">
<img alt="{{ content.logo_url_alt }}" decoding="async" height="42" src="{{ content.logo_url_url }}" width="144"/>
</a>
<div class="menu-container">
<nav aria-label="Menu" class="menu">
<ul>
{% for item in content.menu_items %}
<li class="menu-item{% if item.sub_menu %} has-children{% endif %}">
<a href="{{ item.link }}">
<span class="menu-item-text">{{ item.text }}</span>{% if item.sub_menu %}<span class="sub-arrow"></span>{% endif %}
</a>
{% if item.sub_menu %}
<ul class="sub-menu">
{% for sub in item.sub_menu %}
<li class="menu-item">
<a href="{{ sub.link }}"><span class="menu-item-text">{{ sub.text }}</span></a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
<div aria-expanded="false" aria-label="Menu Toggle" class="menu-toggle" role="button" tabindex="0">
<span aria-hidden="true" class="menu-toggle-icon-open" role="presentation">
<svg aria-hidden="true" focusable="false" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<rect fill="#fff" height="2" width="18" x="3" y="5"></rect>
<rect fill="#fff" height="2" width="18" x="3" y="11"></rect>
<rect fill="#fff" height="2" width="18" x="3" y="17"></rect>
</svg>
</span>
<span aria-hidden="true" class="menu-toggle-icon-close" role="presentation">
<svg aria-hidden="true" focusable="false" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M6 6 L18 18 M18 6 L6 18" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2"></path>
</svg>
</span>
</div>
<a class="button" href="{{ content.button_link }}">{{ content.button_text }}</a>
</div>
</div>
</div>

Styleable elements (JSON)

Lista slot stileabili, es. [{"slot": "title", "default": "h2"}].

CSS base

#club-public-menu-wrapper {
  height: 59px;
}

#club-public-menu {
  display: flex;
  background-color: #000000;
  padding: 8px 20px;
  border-bottom: 1px solid #FFFFFF;
  font-size: 16px;
  line-height: 20px;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

#club-public-menu-wrapper.fixed #club-public-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

#club-public-menu > a {
  font-size: 0;
  line-height: 0;
}

#club-public-menu .menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#club-public-menu nav {
  padding: 0 20px 0 0;
}

#club-public-menu nav > ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

#club-public-menu .has-children {
  position: relative;
}

#club-public-menu .menu-item > a {
  display: inline-block;
  padding: 10px 20px;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
}

#club-public-menu .menu-item > a:hover,
#club-public-menu .menu-item > a:focus {
  color: #AB1E24;
}

#club-public-menu .menu-item .sub-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.35em;
  vertical-align: middle;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #FFFFFF;
}
#club-public-menu .menu-item a:hover .sub-arrow,
#club-public-menu .menu-item a:focus .sub-arrow {
  border-top-color: #AB1E24;
}

#club-public-menu nav > ul > .menu-item:last-child { display: none; }

#club-public-menu .sub-menu {
  display: none;
  background-color: #000000;
  padding: 8px 0 0 0;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
}

#club-public-menu .has-children.submenu-open > .sub-menu {
  display: block;
}

#club-public-menu .sub-menu li:not(:last-child) {
  border-bottom: 1px solid #FFFFFF;
}

#club-public-menu .sub-menu a {
  display: block;
}

#club-public-menu .sub-menu a:hover,
#club-public-menu .sub-menu a:focus {
  background-color: #AB1E24;
  color: #FFFFFF;
}

#club-public-menu .menu-toggle {
  display: none;
}

#club-public-menu .menu-toggle .menu-toggle-icon-close {
  display: none;
}

#club-public-menu .menu-toggle.mobile-nav-open .menu-toggle-icon-open {
  display: none;
}

#club-public-menu .menu-toggle.mobile-nav-open .menu-toggle-icon-close {
  display: flex;
}

#club-public-menu .button {
  display: inline-block;
  background-color: #AB1E24;
  padding: 10px 15px;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

#club-public-menu .button:hover,
#club-public-menu .button:focus {
  background-color: #000000;
  color: #AB1E24;
  border-color: #AB1E24;
  transform: scale(1.1);
  transition: .4s;
}

@media (min-width: 1025px) {
  #club-public-menu nav > ul > .menu-item > a:hover,
  #club-public-menu nav > ul > .menu-item > a:focus {
    transform: scale(1.1);
    transition: .4s;
  }
}

@media (max-width: 1024px) {
  #club-public-menu.mobile-nav-open nav {
    display: block;
  }
  #club-public-menu nav {
    display: none;
    background-color: #000000;
    width: 100%;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
  }
  #club-public-menu nav > ul {
    flex-direction: column;
  }
  #club-public-menu nav > ul > .menu-item > a {
    display: block;
    border-bottom: 1px solid #FFFFFF;
    font-size: 18px;
    line-height: 3em;
  }
  #club-public-menu .menu-item > a:hover,
  #club-public-menu .menu-item > a:focus {
    background-color: #AB1E24;
    color: #FFFFFF;
  }
  #club-public-menu .menu-item a:hover .sub-arrow,
  #club-public-menu .menu-item a:focus .sub-arrow {
    border-top-color: #FFFFFF;
  }
  #club-public-menu .sub-menu {
    position: static;
    padding: 0;
  }
  #club-public-menu .sub-menu li:last-child {
    border-bottom: 1px solid #FFFFFF;
  }
  #club-public-menu .sub-menu a {
    padding-left: 40px;
    font-size: 18px;
    line-height: 3em;
  }
  #club-public-menu .menu-toggle {
    display: block;
    padding: 0 20px 0 0;
  }
  #club-public-menu .menu-toggle > span {
    display: flex;
    padding: 5px;
    cursor: pointer;
  }
  #club-public-menu .menu-toggle svg {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 767px) {
  #club-public-menu {
    padding-right: 15px;
  }

#club-public-menu .button {
    display: none;
  }

#club-public-menu nav > ul > .menu-item:last-child {
    display: list-item;
  }

#club-public-menu .menu-toggle {
    padding: 0;
  }
}

JS base (legacy)

(function () {
  "use strict";

// Nuovo menu semplificato
  var root = document.getElementById("club-public-menu");
  if (!root || root.__clubPublicMenuInit) return;
  root.__clubPublicMenuInit = true;

var MOBILE_MQ = "(max-width: 1024px)";
  var mobileQuery = window.matchMedia(MOBILE_MQ);

function isMobileViewport() {
    return mobileQuery.matches;
  }

function isRealHref(href) {
    if (href == null) return false;
    var h = String(href).trim();
    if (!h) return false;
    return h !== "#";
  }

function parentLinkOf(li) {
    return li.querySelector(":scope > a");
  }

function submenuOf(li) {
    return li.querySelector(":scope > ul.sub-menu");
  }

function closeAllSubmenus() {
    root.querySelectorAll("li.has-children.submenu-open").forEach(function (li) {
      li.classList.remove("submenu-open");
      var link = parentLinkOf(li);
      if (link) link.setAttribute("aria-expanded", "false");
    });
  }

// Toggle menu mobile (< 1025px)
  var menuToggle = root.querySelector(".menu-toggle");
  var iconOpen = root.querySelector(".menu-toggle-icon-open");
  var iconClose = root.querySelector(".menu-toggle-icon-close");

if (iconOpen) {
    iconOpen.addEventListener("click", function (ev) {
      if (!isMobileViewport()) return;
      ev.preventDefault();
      ev.stopPropagation();
      setMobileNavOpen(true);
    });
  }

if (iconClose) {
    iconClose.addEventListener("click", function (ev) {
      if (!isMobileViewport()) return;
      ev.preventDefault();
      ev.stopPropagation();
      setMobileNavOpen(false);
    });
  }

if (menuToggle) {
    menuToggle.addEventListener("keydown", function (ev) {
      if (!isMobileViewport()) return;
      if (ev.key !== "Enter" && ev.key !== " ") return;
      ev.preventDefault();
      setMobileNavOpen(!root.classList.contains("mobile-nav-open"));
    });
  }

if (typeof mobileQuery.addEventListener === "function") {
    mobileQuery.addEventListener("change", function () {
      if (!isMobileViewport()) setMobileNavOpen(false);
    });
  } else if (typeof mobileQuery.addListener === "function") {
    mobileQuery.addListener(function () {
      if (!isMobileViewport()) setMobileNavOpen(false);
    });
  }

// Sottomenu: desktop hover/focus (>1024px) e mobile click (<1025px)
  var items = root.querySelectorAll("li.has-children");

function openSubmenuDesktop(li) {
    if (isMobileViewport()) return;
    if (!submenuOf(li)) return;
    li.classList.add("submenu-open");
    var link = parentLinkOf(li);
    if (link) link.setAttribute("aria-expanded", "true");
  }

function closeSubmenuDesktop(li) {
    if (isMobileViewport()) return;
    li.classList.remove("submenu-open");
    var link = parentLinkOf(li);
    if (link) link.setAttribute("aria-expanded", "false");
  }

function containsFocus(li) {
    var active = document.activeElement;
    return active && li.contains(active);
  }

items.forEach(function (li) {
    var link = parentLinkOf(li);
    if (link && !link.hasAttribute("aria-haspopup")) link.setAttribute("aria-haspopup", "true");
    if (link && !link.hasAttribute("aria-expanded")) link.setAttribute("aria-expanded", "false");

// Mobile: click sul parent apre/chiude; se aperto e click sul testo e href != '#', naviga
    if (link) {
      link.addEventListener("click", function (ev) {
        if (!isMobileViewport()) return;
        if (!submenuOf(li)) return;

var target = ev.target;
        var isOpen = li.classList.contains("submenu-open");

if (
          isOpen &&
          target &&
          target.closest &&
          target.closest(".menu-item-text") &&
          isRealHref(link.getAttribute("href"))
        ) {
          return;
        }

ev.preventDefault();
        ev.stopPropagation();

root.querySelectorAll("li.has-children.submenu-open").forEach(function (other) {
          if (other !== li) setMobileSubmenuOpen(other, false);
        });

setMobileSubmenuOpen(li, !isOpen);
      });
    }

li.addEventListener("mouseenter", function () {
      openSubmenuDesktop(li);
    });
    li.addEventListener("mouseleave", function () {
      if (!containsFocus(li)) closeSubmenuDesktop(li);
    });
    li.addEventListener("focusin", function () {
      openSubmenuDesktop(li);
    });
    li.addEventListener("focusout", function (ev) {
      var next = ev.relatedTarget;
      if (next && li.contains(next)) return;
      closeSubmenuDesktop(li);
    });
  });
})();

Deprecato. Preferire js_shared + js_instance_template.

JS condiviso

Library/behavior, incluso una sola volta per blocco.

JS per istanza

Template con {{ block_id }}, eseguito per ogni occorrenza.

Schema contenuti

Content schema json

Default content json

Modifica blocco