Mega MENU

gistfile1.txt

{"component":{"id":14,"name":"ct_div_block","options":{"ct_id":14,"ct_parent":100002,"selector":"div_block-14-57","original":[],"nicename":"Div (#14)","classes":["x-header"],"activeselector":"x-header"},"depth":2,"children":[{"id":2,"name":"ct_code_block","options":{"ct_id":2,"ct_parent":14,"selector":"code_block-2-57","original":{"code-js":"document.addEventListener(\"DOMContentLoaded\", function () {\n\t\tif( window.angular ) return;\n\n  function findAncestor(el) {\n    return el.closest(\".x-nav\");\n  }\n\n  function removeSiblings(item) {\n    const siblings = item.closest('.x-nav').querySelectorAll(\".x-mega\");\n    siblings.forEach((sibling) => {\n      if (sibling !== item) {\n        sibling.classList.remove(\"x-active\");\n      }\n    });\n  }\n\n  function toggle(item) {\n    item.classList.toggle(\"x-active\");\n    removeSiblings(item);\n    let parent = item.parentElement;\n    while (parent && parent !== document) {\n      if (parent.classList.contains('x-mega')) {\n        parent.classList.add('x-active');\n      }\n      parent = parent.parentElement;\n    }\n  }\n\n  function close(item) {\n    item.classList.remove(\"x-active\");\n  }\n\n  function clickNav(event) {\n    const xNav = findAncestor(event.target);\n    if (xNav) {\n      const parentItem = event.target.closest(\".x-mega\");\n      if (parentItem) {\n        toggle(parentItem);\n      }\n    }\n  }\n\n  function clickClose(event) {\n    const xNav = findAncestor(event.target);\n    if (xNav) {\n      const parentItem = event.target.closest(\".x-mega\");\n      if (parentItem) {\n        close(parentItem);\n      } \n    }\n  }\n\n  function outsideClick(event) {\n    const clickedElement = event.target;\n    const navItems = document.querySelectorAll(\".x-mega\");\n\n    if (!clickedElement.closest(\".x-mega\")) {\n      navItems.forEach((item) => {\n        item.classList.remove(\"x-active\");\n      });\n    }\n  }\n\n  const navButtons = document.querySelectorAll(\".x-mega-btn\");\n  navButtons.forEach((btn) => {\n    btn.addEventListener(\"click\", clickNav);\n  });\n\n  const closeButton = document.querySelectorAll(\".x-close\");\n  closeButton.forEach((btn) => {\n    btn.addEventListener(\"click\", clickClose);\n  });\n\n  document.addEventListener(\"click\", outsideClick);\n\t\t\n\t\t\t\t\t//Limited\nconst contents = document.querySelectorAll('.x-mega-submenu');\nfunction adjustDivPosition(content) {\n  const limit = content.getBoundingClientRect();\n  const screenWidth = window.innerWidth;\n\n  if (limit.left < -0) {\n    content.style.left = '0';\n  } else if (limit.right > screenWidth) {\n    content.style.right = '20px'; \n  }\n}\n\ncontents.forEach((content) => {\n  adjustDivPosition(content);\n});\n\t\n\t//Current\n\t\n        const xMegaLinks = document.querySelectorAll('.x-mega a');\n\n        const currentPageURL = window.location.href;\n\n        for (const link of xMegaLinks) {\n            if (link.href === currentPageURL) {\n                link.classList.add('current-link');\n            }\n        }\n});","code-php":"<!---->","code-css":"@media (max-width: 991px)  {\n  .x-menu {\n    position: absolute;\n    top: 100%;\n    transform: translateY(-200%);\n    transition-duration: 0.5s;\n  }\n  .x-mega-menu.x-active .x-menu {\n    transform: translateY(0);\n  }\n  \n.ct-component .x-menu {\n    transform: translateY(0);\n  }\n  \n}\n  \n.x-mega-btn-icon {\n  transition-duration: 0.3s;\n}\n\n.x-mega-megamenu.x-active .x-mega-btn-icon {\n  transform: rotate(180deg) translateY(-2px);\n}\n\n/*Sub Menu*/\n\n@media (min-width: 991px) {\n  .x-mega-submenu {\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  left: 0;\n  right: 0;\n  transition-duration: 0.3s;\n  transform: translateY(5px);\n  opacity: 0;\n  visibility: hidden;\nbox-shadow: 0px 3px 6px 0px rgba(140, 149, 159, 0.15);\n}\n\n.x-mega-megamenu.x-active .x-mega-submenu {\n   transform: translateY(0px);\n   opacity: 1;\n  visibility: visible;\n}\n\n.ct-component .x-mega-submenu { /*Only Oxygen Builder*/\n   transform: translateY(0px);\n   opacity: 1;\n  visibility: visible;\n}\n}\n@media (max-width: 991px) {\n  .x-mega-submenu {\n    max-height: 0;\n    overflow: hidden;\n    transition-duration: 0.5s;\n  }\n    .x-mega-megamenu.x-active .x-mega-submenu {\n     max-height: 200vh;\n    overflow: hidden;\n  }\n}\n\n\n/*End Sub Menu*/\n\n/*Icon Menu*/\n\n.x-icon-menu {\n  transition: 0.3s;\n}\n.x-mega-menu.x-active  .x-icon-menu {\n  transform: scale3d(0,0,0);\n}\n\n.x-icon-menu-close {\n  transform: scale3d(0,0,0);\n  transition: 0.3s;\n}\n\n.x-mega-menu.x-active  .x-icon-menu-close {\n  transform: scale3d(1,1,1);\n}\n/*END Icon Menu */"},"nicename":"Code Block (#2)","activeselector":false},"depth":3},{"id":3,"name":"ct_div_block","options":{"ct_id":3,"ct_parent":14,"selector":"div_block-3-57","original":{"flex-direction":"row","display":"flex","align-items":"center","justify-content":"space-between","padding-left":"20","padding-right":"20","background-color":"#ffffff"},"nicename":"Sub Header","classes":["x-nav"],"activeselector":false,"media":{"tablet":{"original":{"padding-right":"0"}}}},"depth":3,"children":[{"id":89,"name":"ct_image","options":{"ct_id":89,"ct_parent":3,"selector":"image-89-57","original":{"image_type":"2","attachment_size":"full","attachment_id":59,"attachment_height":78,"attachment_width":396,"attachment_url":"http://tienda2.local/wp-content/uploads/2023/10/Screenshot_11.jpg","max-width-unit":"px","max-width":"180"},"nicename":"Image (#89)","activeselector":false,"media":{"phone-portrait":{"original":{"max-width":"121","max-width-unit":"px"}}}},"depth":4},{"id":30,"name":"ct_div_block","options":{"ct_id":30,"ct_parent":3,"selector":"div_block-30-57","original":{},"nicename":"Menu","classes":["x-mega","x-mega-menu"],"activeselector":"x-mega-menu"},"depth":4,"children":[{"id":34,"name":"ct_div_block","options":{"ct_id":34,"ct_parent":30,"selector":"div_block-34-57","original":[],"nicename":"Links","classes":["x-menu"],"activeselector":"x-menu"},"depth":5,"children":[{"id":4,"name":"ct_div_block","options":{"ct_id":4,"ct_parent":34,"selector":"div_block-4-57","original":[],"nicename":"Link","classes":["x-mega","x-mega-megamenu"],"activeselector":"x-mega-megamenu"},"depth":6,"children":[{"id":5,"name":"ct_div_block","options":{"ct_id":5,"ct_parent":4,"selector":"div_block-5-57","original":[],"nicename":"Menu btn","classes":["x-mega-btn","x-mega-btn-mega"],"activeselector":"x-mega-btn-mega"},"depth":7,"children":[{"id":7,"name":"ct_text_block","options":{"ct_id":7,"ct_parent":5,"selector":"text_block-7-57","original":[],"nicename":"Text (#7)","ct_content":"Products","activeselector":"x-mega-btn-text","classes":["x-mega-btn-text"]},"depth":8},{"id":13,"name":"ct_fancy_icon","options":{"ct_id":13,"ct_parent":5,"selector":"fancy_icon-13-57","original":{"icon-id":"FontAwesomeicon-angle-up"},"nicename":"Icon (#13)","classes":["x-mega-btn-icon"],"activeselector":"x-mega-btn-icon"},"depth":8}]},{"id":6,"name":"ct_div_block","options":{"ct_id":6,"ct_parent":4,"selector":"div_block-6-57","original":[],"nicename":"Submenu","classes":["x-mega-submenu"],"activeselector":"x-mega-submenu"},"depth":7,"children":[{"id":17,"name":"ct_new_columns","options":{"ct_id":17,"ct_parent":6,"selector":"new_columns-17-57","original":[],"nicename":"Columns (#17)"},"depth":8,"children":[{"id":18,"name":"ct_div_block","options":{"ct_id":18,"ct_parent":17,"selector":"div_block-18-57","original":{"width":"33.33","width-unit":"%","text-align":"left"},"nicename":"Div (#18)","activeselector":false},"depth":8,"children":[{"id":21,"name":"ct_text_block","options":{"ct_id":21,"ct_parent":18,"selector":"text_block-21-57","original":{"margin-bottom":"10"},"nicename":"Text (#21)","ct_content":"MENU 1","activeselector":false},"depth":9},{"id":22,"name":"oxy_nav_menu","options":{"ct_id":22,"ct_parent":18,"selector":"_nav_menu-22-57","original":{"menu_responsive":"never","menu_responsive_padding_size":"0","menu_responsive_icon_size":"40","menu_responsive_icon_margin":"10","dropdowns":"off","menu_dropdown_arrow":"off","menu_padding-top":"0","menu_padding-left":"0","menu_padding-right":"0","menu_padding-bottom":"5","menu_flex-direction":"column","width":"100","width-unit":"%","menu_font-size":"14"},"nicename":"Menu (#22)","ct_nav_menu":"true","hover":[],"activeselector":false},"depth":9}]},{"id":19,"name":"ct_div_block","options":{"ct_id":19,"ct_parent":17,"selector":"div_block-19-57","original":{"width":"33.33","width-unit":"%"},"nicename":"Div (#19)","activeselector":false},"depth":8,"children":[{"id":27,"name":"ct_text_block","options":{"ct_id":27,"ct_parent":19,"selector":"text_block-27-57","original":{"margin-bottom":"10"},"nicename":"Text (#27)","ct_content":"MENU 1"},"depth":9},{"id":26,"name":"oxy_nav_menu","options":{"ct_id":26,"ct_parent":19,"selector":"_nav_menu-26-57","original":{"menu_responsive":"never","menu_responsive_padding_size":"0","menu_responsive_icon_size":"40","menu_responsive_icon_margin":"10","dropdowns":"off","menu_dropdown_arrow":"off","menu_padding-top":"0","menu_padding-left":"0","menu_padding-right":"0","menu_padding-bottom":"5","menu_flex-direction":"column","width":"100","width-unit":"%","menu_font-size":"14"},"nicename":"Menu (#26)","ct_nav_menu":"true","hover":[],"activeselector":false},"depth":9}]},{"id":20,"name":"ct_div_block","options":{"ct_id":20,"ct_parent":17,"selector":"div_block-20-57","original":{"width":"33.34","width-unit":"%","padding-top":"0","padding-right":"0","padding-bottom":"0","padding-left":"0"},"nicename":"Div (#20)","activeselector":false},"depth":8,"children":[{"id":23,"name":"ct_div_block","options":{"ct_id":23,"ct_parent":20,"selector":"div_block-23-57","original":{"width":"100","width-unit":"%","background-color":"#f7f7f7","padding-top":"20","padding-right":"20","padding-bottom":"20","padding-left":"20"},"nicename":"Div (#23)","activeselector":false},"depth":9,"children":[{"id":24,"name":"ct_text_block","options":{"ct_id":24,"ct_parent":23,"selector":"text_block-24-57","original":{"margin-bottom":"15"},"nicename":"Text (#24)","ct_content":"MENU 1"},"depth":10},{"id":25,"name":"ct_video","options":{"ct_id":25,"ct_parent":23,"selector":"video-25-57","original":{"src":"https://www.youtube.com/watch?v=7yae8GvpPVo","embed_src":"https://www.youtube.com/embed/7yae8GvpPVo"},"nicename":"Video (#25)"},"depth":10}]}]}]}]}]},{"id":73,"name":"ct_div_block","options":{"ct_id":73,"ct_parent":34,"selector":"div_block-73-57","original":[],"nicename":"Link","classes":["x-mega","x-mega-megamenu"],"activeselector":"x-mega-megamenu"},"depth":6,"children":[{"id":74,"name":"ct_div_block","options":{"ct_id":74,"ct_parent":73,"selector":"div_block-74-57","original":[],"nicename":"Menu btn","classes":["x-mega-btn","x-mega-btn-mega"],"activeselector":"x-mega-btn"},"depth":7,"children":[{"id":75,"name":"ct_text_block","options":{"ct_id":75,"ct_parent":74,"selector":"text_block-75-57","original":[],"nicename":"Text (#7)","ct_content":"Products","classes":["x-mega-btn-text"]},"depth":8},{"id":76,"name":"ct_fancy_icon","options":{"ct_id":76,"ct_parent":74,"selector":"fancy_icon-76-57","original":{"icon-id":"FontAwesomeicon-angle-up"},"nicename":"Icon (#13)","classes":["x-mega-btn-icon"]},"depth":8}]},{"id":77,"name":"ct_div_block","options":{"ct_id":77,"ct_parent":73,"selector":"div_block-77-57","original":[],"nicename":"Submenu","classes":["x-mega-submenu"],"activeselector":"x-mega-submenu"},"depth":7,"children":[{"id":78,"name":"ct_new_columns","options":{"ct_id":78,"ct_parent":77,"selector":"new_columns-78-57","original":[],"nicename":"Columns (#17)"},"depth":8,"children":[{"id":79,"name":"ct_div_block","options":{"ct_id":79,"ct_parent":78,"selector":"div_block-79-57","original":{"width":"33.33","width-unit":"%","text-align":"left"},"nicename":"Div (#18)"},"depth":8,"children":[{"id":80,"name":"ct_text_block","options":{"ct_id":80,"ct_parent":79,"selector":"text_block-80-57","original":{"margin-bottom":"10"},"nicename":"Text (#21)","ct_content":"MENU 1"},"depth":9},{"id":81,"name":"oxy_nav_menu","options":{"ct_id":81,"ct_parent":79,"selector":"_nav_menu-81-57","original":{"menu_responsive":"never","menu_responsive_padding_size":"0","menu_responsive_icon_size":"40","menu_responsive_icon_margin":"10","dropdowns":"off","menu_dropdown_arrow":"off","menu_padding-top":"0","menu_padding-left":"0","menu_padding-right":"0","menu_padding-bottom":"5","menu_flex-direction":"column","width":"100","width-unit":"%","menu_font-size":"14"},"nicename":"Menu (#22)","ct_nav_menu":"true","hover":[]},"depth":9}]},{"id":82,"name":"ct_div_block","options":{"ct_id":82,"ct_parent":78,"selector":"div_block-82-57","original":{"width":"33.33","width-unit":"%"},"nicename":"Div (#19)"},"depth":8,"children":[{"id":83,"name":"ct_text_block","options":{"ct_id":83,"ct_parent":82,"selector":"text_block-83-57","original":{"margin-bottom":"10"},"nicename":"Text (#27)","ct_content":"MENU 1"},"depth":9},{"id":84,"name":"oxy_nav_menu","options":{"ct_id":84,"ct_parent":82,"selector":"_nav_menu-84-57","original":{"menu_responsive":"never","menu_responsive_padding_size":"0","menu_responsive_icon_size":"40","menu_responsive_icon_margin":"10","dropdowns":"off","menu_dropdown_arrow":"off","menu_padding-top":"0","menu_padding-left":"0","menu_padding-right":"0","menu_padding-bottom":"5","menu_flex-direction":"column","width":"100","width-unit":"%","menu_font-size":"14"},"nicename":"Menu (#26)","ct_nav_menu":"true","hover":[]},"depth":9}]},{"id":85,"name":"ct_div_block","options":{"ct_id":85,"ct_parent":78,"selector":"div_block-85-57","original":{"width":"33.34","width-unit":"%","padding-top":"0","padding-right":"0","padding-bottom":"0","padding-left":"0"},"nicename":"Div (#20)"},"depth":8,"children":[{"id":86,"name":"ct_div_block","options":{"ct_id":86,"ct_parent":85,"selector":"div_block-86-57","original":{"width":"100","width-unit":"%","background-color":"#f7f7f7","padding-top":"20","padding-right":"20","padding-bottom":"20","padding-left":"20"},"nicename":"Div (#23)"},"depth":9,"children":[{"id":87,"name":"ct_text_block","options":{"ct_id":87,"ct_parent":86,"selector":"text_block-87-57","original":{"margin-bottom":"15"},"nicename":"Text (#24)","ct_content":"MENU 1"},"depth":10},{"id":88,"name":"ct_video","options":{"ct_id":88,"ct_parent":86,"selector":"video-88-57","original":{"src":"https://www.youtube.com/watch?v=7yae8GvpPVo","embed_src":"https://www.youtube.com/embed/7yae8GvpPVo"},"nicename":"Video (#25)"},"depth":10}]}]}]}]}]}]},{"id":107,"name":"ct_text_block","options":{"ct_id":107,"ct_parent":30,"selector":"text_block-107-57","original":{},"nicename":"Text (#107)","ct_content":"Get a Demo","classes":["x-btn"],"activeselector":"x-btn"},"depth":5},{"id":31,"name":"ct_div_block","options":{"ct_id":31,"ct_parent":30,"selector":"div_block-31-57","original":[],"nicename":"Menu btn Mobile","classes":["x-menu-btn-mb","x-mega-btn"],"activeselector":"x-menu-btn-mb"},"depth":5,"children":[{"id":33,"name":"ct_fancy_icon","options":{"ct_id":33,"ct_parent":31,"selector":"fancy_icon-33-57","original":{"icon-id":"FontAwesomeicon-bars","icon-size":"30"},"nicename":"Icon (#13)","classes":["x-icon-menu"],"activeselector":"x-icon-menu"},"depth":6},{"id":55,"name":"ct_fancy_icon","options":{"ct_id":55,"ct_parent":31,"selector":"fancy_icon-55-57","original":{"icon-id":"FontAwesomeicon-close"},"nicename":"Icon (#55)","classes":["x-icon-menu-close"],"activeselector":"x-icon-menu-close"},"depth":6}]}]}]}]},"classes":{"x-header":{"key":"x-header","original":{"width-unit":"%","position":"absolute","width":"100"},"media":{"tablet":{"original":{"z-index":"10000"}}}},"x-nav":{"key":"x-nav","original":{"width-unit":"%","width":"100","selector-locked":"true"},"media":{"tablet":{"original":{"flex-direction":"row","display":"flex","justify-content":"flex-end"}}}},"x-mega":{"key":"x-mega","original":{"selector-locked":"true"}},"x-mega-menu":{"key":"x-mega-menu","original":{"flex-direction":"row","display":"flex","align-items":"center","width":"100","width-unit":"%","justify-content":"space-between","padding-left":"50"},"media":{"tablet":{"original":{"padding-left":"0","width-unit":"auto"}}}},"x-menu":{"key":"x-menu","media":{"tablet":{"original":{"top-unit":"%","width-unit":"%","height-unit":"auto","position":"absolute","top":"100","left":"0","right":"0","width":"100","flex-direction":"column","display":"flex","z-index":"-1","gap":"0"}}},"original":{"flex-direction":"row","display":"flex","gap":"25"}},"x-mega-megamenu":{"key":"x-mega-megamenu","media":{"tablet":{"original":{"width-unit":"%","top-unit":"%","left":"0","right":"0","width":"100","top":"100"}}},"original":{}},"x-mega-btn":{"key":"x-mega-btn","original":{"selector-locked":"true","custom-css":"cursor: pointer;"},"media":{"tablet":{"original":{}}}},"x-mega-btn-mega":{"key":"x-mega-btn-mega","media":{"tablet":{"original":{"width-unit":"%","width":"100","justify-content":"space-between","padding-left":"20","padding-right":"20","border-bottom-style":"solid","border-bottom-width":"1","border-bottom-color":"#efefef"}}},"original":{"flex-direction":"row","display":"flex","align-items":"center","padding-top":"20","padding-bottom":"20"}},"x-mega-btn-text":{"key":"x-mega-btn-text","original":{}},"x-mega-btn-icon":{"key":"x-mega-btn-icon","original":{"icon-size":"20","margin-left":"10"}},"x-mega-submenu":{"key":"x-mega-submenu","media":{"tablet":{"original":{"width-unit":"%","width":"100"}}}},"x-btn":{"key":"x-btn","original":{"padding-top":"10","padding-bottom":"10","padding-left":"25","padding-right":"25","border-radius":"5","background-color":"#5820ad","color":"#ffffff"},"media":{"phone-landscape":{"original":{"font-size":"14","padding-top":"5","padding-bottom":"5"}},"phone-portrait":{"original":{"font-size":"13","padding-left":"10","padding-right":"10"}}}},"x-menu-btn-mb":{"key":"x-menu-btn-mb","original":{"width":"60","height":"60","align-items":"center","justify-content":"center","position":"relative","display":"none"},"media":{"tablet":{"original":{"display":"flex","margin-left":"20"}},"phone-portrait":{"original":{}},"phone-landscape":{"original":{"margin-left":"10"}}}},"x-icon-menu":{"key":"x-icon-menu","original":{"icon-size":"40"}},"x-icon-menu-close":{"key":"x-icon-menu-close","original":{"icon-size":"30","position":"absolute"}}}}