Submenu collision detection with viewport height

[jonathanzuniga]

Hello,

does the plugin have an option to flip a submenu up if it collides with the height of the viewport? Something like what the bottomToTopSubMenus option does but that works automatically.

I tried the following but it doesn't work:

  const menuOptions = {
    hideFunction: null,
    hideTimeout: 0,
    showFunction: null,
    showOnClick: true,
    showTimeout: 0,
    subMenusMaxWidth: "37.5rem",
    subMenusMinWidth: "7.5rem",
    subMenusSubOffsetX: 3,
    subMenusSubOffsetY: -3,
  };
  const { vh } = viewportDimensions();

  let bottomToTopSubMenus = false;

  $(menuRef.value).smartmenus(menuOptions);
  $(menuRef.value).on("show.smapi", (event, menu) => {
    const menuHeight = menu.offsetHeight;
    const menuTop = menu.getBoundingClientRect().top;

   if (menuHeight + menuTop > vh) {
      bottomToTopSubMenus = true;

      $(menuRef.value).smartmenus({
        ...menuOptions,
        ...{ bottomToTopSubMenus },
      });
    } else {
      bottomToTopSubMenus = false;
    }
  });

Thanks in advance and regards.

[jonathanzuniga]

Hello,

does the plugin have an option to flip a submenu up if it collides with the height of the viewport? Something like what the bottomToTopSubMenus option does but that works automatically.

I tried the following but it doesn't work:

  const menuOptions = {
    hideFunction: null,
    hideTimeout: 0,
    showFunction: null,
    showOnClick: true,
    showTimeout: 0,
    subMenusMaxWidth: "37.5rem",
    subMenusMinWidth: "7.5rem",
    subMenusSubOffsetX: 3,
    subMenusSubOffsetY: -3,
  };
  const { vh } = viewportDimensions();

  let bottomToTopSubMenus = false;

  $(menuRef.value).smartmenus(menuOptions);
  $(menuRef.value).on("show.smapi", (event, menu) => {
    const menuHeight = menu.offsetHeight;
    const menuTop = menu.getBoundingClientRect().top;

   if (menuHeight + menuTop > vh) {
      bottomToTopSubMenus = true;

      $(menuRef.value).smartmenus({
        ...menuOptions,
        ...{ bottomToTopSubMenus },
      });
    } else {
      bottomToTopSubMenus = false;
    }
  });

Thanks in advance and regards.

Found a solution...

$(menuRef.value).on("show.smapi", (event, menu) => {
      const menuHeight = menu.offsetHeight;
      const menuTop = menu.getBoundingClientRect().top;

      if (menuHeight < vh) {
        if (menuHeight + menuTop > vh) {
          menu.style.marginTop = `-${menuHeight + 18}px`;
          menu.classList.add("menu--bottom-to-top");
        } else {
          menu.classList.remove("menu--bottom-to-top");
        }
      }
    });