Skip to content

Instantly share code, notes, and snippets.

@hssktm
Created March 21, 2025 05:23
Show Gist options
  • Save hssktm/5ffd5ee6b0cb4d2152e1fa1c836c796e to your computer and use it in GitHub Desktop.
Save hssktm/5ffd5ee6b0cb4d2152e1fa1c836c796e to your computer and use it in GitHub Desktop.
MEGA MENU MODERN OXYGEN
JSON Header and Menu
{"component":{"id":53,"name":"ct_div_block","options":{"ct_id":53,"ct_parent":0,"selector":"div_block-53-125","original":{"useCustomTag":"true","tag":"header","width":"100","width-unit":"%","position":"fixed","top":"10","z-index":"9999"},"nicename":"Header"},"depth":1,"children":[{"id":3,"name":"ct_div_block","options":{"ct_id":3,"ct_parent":53,"selector":"div_block-3-125","original":{"width":"max-content","width-unit":" ","useCustomTag":"true","tag":"nav","flex-direction":"row","display":"flex","align-items":"center","justify-content":"space-between","background-color":"#303030","border-radius":"1","border-radius-unit":"rem","padding-right":"6","padding-left":"6","height":"50","margin-left-unit":"auto","margin-right-unit":"auto","position":"relative","gap":"1","gap-unit":"rem"},"nicename":"Nav","activeselector":false,"media":{"tablet":{"original":{"width":"90","width-unit":"%"}}}},"depth":2,"children":[{"id":7,"name":"ct_div_block","options":{"ct_id":7,"ct_parent":3,"selector":"div_block-7-125","original":[],"nicename":"Logo"},"depth":3,"children":[{"id":10,"name":"ct_image","options":{"ct_id":10,"ct_parent":7,"selector":"image-10-125","original":{"image_type":"2","attachment_size":"full","attachment_id":128,"attachment_height":225,"attachment_width":225,"attachment_url":"https://elements.reyescode.com/wp-content/uploads/2025/03/images-3.jpg","width":"35","height":"35","border-radius":"100"},"nicename":"Image Logo","activeselector":false},"depth":4}]},{"id":37,"name":"ct_div_block","options":{"ct_id":37,"ct_parent":3,"selector":"div_block-37-125","original":{"custom-attributes":[{"name":"data-mega-open","value":"click"},{"name":"data-mega-transition","value":"0.3s"},{"name":"data-mega-scroll","value":"always"},{"name":"data-mega-close-back","value":"true"}],"text-align":"left","flex-direction":"row","display":"flex","align-items":"center"},"nicename":"Menu Mega","classes":["x-mega"],"activeselector":false},"depth":3,"children":[{"id":39,"name":"ct_div_block","options":{"ct_id":39,"ct_parent":37,"selector":"div_block-39-125","original":[],"nicename":"Btn Mobile Activate","classes":["x-mega-activate","menu-pro-icons"],"activeselector":"menu-pro-icons"},"depth":4,"children":[{"id":44,"name":"ct_fancy_icon","options":{"ct_id":44,"ct_parent":39,"selector":"fancy_icon-44-125","original":{"icon-id":"FontAwesomeicon-ellipsis-v"},"nicename":"Icon (#44)","classes":["menu-pro-icon-menu-open","menu-pro-icon-menu-close"],"activeselector":"menu-pro-icon-menu-open"},"depth":5},{"id":45,"name":"ct_fancy_icon","options":{"ct_id":45,"ct_parent":39,"selector":"fancy_icon-45-125","original":{"icon-id":"FontAwesomeicon-close"},"nicename":"Icon (#45)","classes":["menu-pro-icon-x-open","menu-pro-icon-x-close"],"activeselector":"menu-pro-icon-x-open"},"depth":5}]},{"id":40,"name":"ct_div_block","options":{"ct_id":40,"ct_parent":37,"selector":"div_block-40-125","original":[],"nicename":"Menu Content","activeselector":"menu-pro-wrap-open","classes":["menu-pro-wrap-open","menu-pro-wrap-close"]},"depth":4,"children":[{"id":8,"name":"ct_div_block","options":{"ct_id":8,"ct_parent":40,"selector":"div_block-8-125","original":{"height-unit":"%"},"nicename":"Links","activeselector":"menu-pro-links","classes":["menu-pro-links"]},"depth":5,"children":[{"id":11,"name":"ct_div_block","options":{"ct_id":11,"ct_parent":8,"selector":"div_block-11-125","original":{"custom-attributes":[{"name":"data-mega-open","value":"hover"},{"name":"data-mega-transition","value":"0.2s"},{"name":"data-mega-close-back","value":"true"}],"justify-content":"center"},"nicename":"Link Mega","classes":["x-mega","menu-pro-wrap-link"],"activeselector":"menu-pro-wrap-link","last-of-type":{}},"depth":6,"children":[{"id":13,"name":"ct_div_block","options":{"ct_id":13,"ct_parent":11,"selector":"div_block-13-125","original":[],"nicename":"Link Activate","classes":["x-mega-activate","menu-pro-link-open","menu-pro-link-close"],"activeselector":"menu-pro-link-close"},"depth":7,"children":[{"id":16,"name":"ct_text_block","options":{"ct_id":16,"ct_parent":13,"selector":"text_block-16-125","original":[],"nicename":"Text (#16)","ct_content":"Product","activeselector":""},"depth":8},{"id":23,"name":"ct_fancy_icon","options":{"ct_id":23,"ct_parent":13,"selector":"fancy_icon-23-125","original":{"icon-id":"FontAwesomeicon-angle-down"},"nicename":"Icon (#23)","activeselector":"menu-pro-link-icon-close","classes":["menu-pro-link-icon-open","menu-pro-link-icon-close"]},"depth":8}]},{"id":14,"name":"ct_div_block","options":{"ct_id":14,"ct_parent":11,"selector":"div_block-14-125","original":[],"nicename":"Content","activeselector":"menu-pro-content-open","classes":["menu-pro-content-open","menu-pro-content-close"]},"depth":7,"children":[{"id":17,"name":"ct_div_block","options":{"ct_id":17,"ct_parent":14,"selector":"div_block-17-125","original":[],"nicename":"Sub Content","classes":["mega-pro-subcontent"],"activeselector":"mega-pro-subcontent"},"depth":8,"children":[{"id":19,"name":"ct_div_block","options":{"ct_id":19,"ct_parent":17,"selector":"div_block-19-125","original":{"display":"grid","grid-column-count":"2"},"nicename":"Div (#19)","media":{"tablet":{"original":{"display":"grid","grid-column-count":"1","grid-column-min-width":"0"}}}},"depth":9,"children":[{"id":20,"name":"ct_div_block","options":{"ct_id":20,"ct_parent":19,"selector":"div_block-20-125","original":{"gap":"10"},"nicename":"Div (#20)"},"depth":10,"children":[{"id":18,"name":"ct_image","options":{"ct_id":18,"ct_parent":20,"selector":"image-18-125","original":{"image_type":"2","attachment_size":"full","attachment_id":129,"attachment_height":896,"attachment_width":1152,"attachment_url":"https://elements.reyescode.com/wp-content/uploads/2025/03/creators.jpeg"},"nicename":"Image (#18)","activeselector":false},"depth":11},{"id":58,"name":"ct_div_block","options":{"ct_id":58,"ct_parent":20,"selector":"div_block-58-125","original":{"gap":"5"},"nicename":"Div (#58)"},"depth":11,"children":[{"id":24,"name":"ct_text_block","options":{"ct_id":24,"ct_parent":58,"selector":"text_block-24-125","original":{"color":"#ffffff"},"nicename":"Text (#24)","ct_content":"Payment Methods","activeselector":false},"depth":12},{"id":25,"name":"ct_text_block","options":{"ct_id":25,"ct_parent":58,"selector":"text_block-25-125","original":{"color":"#ffffff","font-size":"14"},"nicename":"Text (#25)","ct_content":"This is a block of text. Double-click this text to edit it.","activeselector":false},"depth":12}]},{"id":60,"name":"ct_div_block","options":{"ct_id":60,"ct_parent":20,"selector":"div_block-60-125","original":{"gap":"5"},"nicename":"Div (#60)"},"depth":11,"children":[{"id":61,"name":"ct_text_block","options":{"ct_id":61,"ct_parent":60,"selector":"text_block-61-125","original":{"color":"#ffffff"},"nicename":"Text (#24)","ct_content":"Payment Methods","activeselector":false},"depth":12},{"id":62,"name":"ct_text_block","options":{"ct_id":62,"ct_parent":60,"selector":"text_block-62-125","original":{"color":"#ffffff","font-size":"14"},"nicename":"Text (#25)","ct_content":"This is a block of text. Double-click this text to edit it.","activeselector":false},"depth":12}]},{"id":63,"name":"ct_div_block","options":{"ct_id":63,"ct_parent":20,"selector":"div_block-63-125","original":{"gap":"5"},"nicename":"Div (#63)"},"depth":11,"children":[{"id":64,"name":"ct_text_block","options":{"ct_id":64,"ct_parent":63,"selector":"text_block-64-125","original":{"color":"#ffffff"},"nicename":"Text (#24)","ct_content":"Payment Methods","activeselector":false},"depth":12},{"id":65,"name":"ct_text_block","options":{"ct_id":65,"ct_parent":63,"selector":"text_block-65-125","original":{"color":"#ffffff","font-size":"14"},"nicename":"Text (#25)","ct_content":"This is a block of text. Double-click this text to edit it.","activeselector":false},"depth":12}]}]},{"id":66,"name":"ct_div_block","options":{"ct_id":66,"ct_parent":19,"selector":"div_block-66-125","original":{"gap":"10"},"nicename":"Div (#66)"},"depth":10,"children":[{"id":67,"name":"ct_image","options":{"ct_id":67,"ct_parent":66,"selector":"image-67-125","original":{"image_type":"2","attachment_size":"full","attachment_id":129,"attachment_height":896,"attachment_width":1152,"attachment_url":"https://elements.reyescode.com/wp-content/uploads/2025/03/creators.jpeg"},"nicename":"Image (#18)","activeselector":false},"depth":11},{"id":68,"name":"ct_div_block","options":{"ct_id":68,"ct_parent":66,"selector":"div_block-68-125","original":{"gap":"5"},"nicename":"Div (#58)"},"depth":11,"children":[{"id":69,"name":"ct_text_block","options":{"ct_id":69,"ct_parent":68,"selector":"text_block-69-125","original":{"color":"#ffffff"},"nicename":"Text (#24)","ct_content":"Payment Methods","activeselector":false},"depth":12},{"id":70,"name":"ct_text_block","options":{"ct_id":70,"ct_parent":68,"selector":"text_block-70-125","original":{"color":"#ffffff","font-size":"14"},"nicename":"Text (#25)","ct_content":"This is a block of text. Double-click this text to edit it.","activeselector":false},"depth":12}]},{"id":71,"name":"ct_div_block","options":{"ct_id":71,"ct_parent":66,"selector":"div_block-71-125","original":{"gap":"5"},"nicename":"Div (#60)"},"depth":11,"children":[{"id":72,"name":"ct_text_block","options":{"ct_id":72,"ct_parent":71,"selector":"text_block-72-125","original":{"color":"#ffffff"},"nicename":"Text (#24)","ct_content":"Payment Methods","activeselector":false},"depth":12},{"id":73,"name":"ct_text_block","options":{"ct_id":73,"ct_parent":71,"selector":"text_block-73-125","original":{"color":"#ffffff","font-size":"14"},"nicename":"Text (#25)","ct_content":"This is a block of text. Double-click this text to edit it.","activeselector":false},"depth":12}]},{"id":74,"name":"ct_div_block","options":{"ct_id":74,"ct_parent":66,"selector":"div_block-74-125","original":{"gap":"5"},"nicename":"Div (#63)"},"depth":11,"children":[{"id":75,"name":"ct_text_block","options":{"ct_id":75,"ct_parent":74,"selector":"text_block-75-125","original":{"color":"#ffffff"},"nicename":"Text (#24)","ct_content":"Payment Methods","activeselector":false},"depth":12},{"id":76,"name":"ct_text_block","options":{"ct_id":76,"ct_parent":74,"selector":"text_block-76-125","original":{"color":"#ffffff","font-size":"14"},"nicename":"Text (#25)","ct_content":"This is a block of text. Double-click this text to edit it.","activeselector":false},"depth":12}]}]}]}]}]}]},{"id":77,"name":"ct_div_block","options":{"ct_id":77,"ct_parent":8,"selector":"div_block-77-125","original":{"custom-attributes":[{"name":"data-mega-open","value":"hover"},{"name":"data-mega-transition","value":"0.2s"},{"name":"data-mega-close-back","value":"true"}],"justify-content":"center"},"nicename":"Link Mega","classes":["x-mega","menu-pro-wrap-link"],"activeselector":"menu-pro-wrap-link","last-of-type":{}},"depth":6,"children":[{"id":78,"name":"ct_div_block","options":{"ct_id":78,"ct_parent":77,"selector":"div_block-78-125","original":[],"nicename":"Link Activate","classes":["x-mega-activate","menu-pro-link-open","menu-pro-link-close"],"activeselector":"menu-pro-link-open"},"depth":7,"children":[{"id":79,"name":"ct_text_block","options":{"ct_id":79,"ct_parent":78,"selector":"text_block-79-125","original":{},"nicename":"Text (#16)","ct_content":"Resources","activeselector":""},"depth":8},{"id":80,"name":"ct_fancy_icon","options":{"ct_id":80,"ct_parent":78,"selector":"fancy_icon-80-125","original":{"icon-id":"FontAwesomeicon-angle-down"},"nicename":"Icon (#23)","activeselector":"menu-pro-link-icon-close","classes":["menu-pro-link-icon-open","menu-pro-link-icon-close"]},"depth":8}]},{"id":81,"name":"ct_div_block","options":{"ct_id":81,"ct_parent":77,"selector":"div_block-81-125","original":[],"nicename":"Content","activeselector":"menu-pro-content-open","classes":["menu-pro-content-open","menu-pro-content-close"]},"depth":7,"children":[{"id":82,"name":"ct_div_block","options":{"ct_id":82,"ct_parent":81,"selector":"div_block-82-125","original":[],"nicename":"Sub Content","classes":["mega-pro-subcontent"],"activeselector":"mega-pro-subcontent"},"depth":8,"children":[{"id":83,"name":"ct_div_block","options":{"ct_id":83,"ct_parent":82,"selector":"div_block-83-125","original":{"grid-column-count":"2"},"nicename":"Div (#19)","media":{"tablet":{"original":{"display":"grid","grid-column-count":"1","grid-column-min-width":"0"}}},"activeselector":""},"depth":9,"children":[{"id":84,"name":"ct_div_block","options":{"ct_id":84,"ct_parent":83,"selector":"div_block-84-125","original":{"gap":"10"},"nicename":"Div (#20)","activeselector":""},"depth":10,"children":[{"id":86,"name":"ct_div_block","options":{"ct_id":86,"ct_parent":84,"selector":"div_block-86-125","original":{"gap":"5"},"nicename":"Div (#58)"},"depth":11,"children":[{"id":87,"name":"ct_text_block","options":{"ct_id":87,"ct_parent":86,"selector":"text_block-87-125","original":{"color":"#ffffff"},"nicename":"Text (#24)","ct_content":"Payment Methods","activeselector":false},"depth":12},{"id":88,"name":"ct_text_block","options":{"ct_id":88,"ct_parent":86,"selector":"text_block-88-125","original":{"color":"#ffffff","font-size":"14"},"nicename":"Text (#25)","ct_content":"This is a block of text. Double-click this text to edit it.","activeselector":false},"depth":12}]},{"id":89,"name":"ct_div_block","options":{"ct_id":89,"ct_parent":84,"selector":"div_block-89-125","original":{"gap":"5"},"nicename":"Div (#60)"},"depth":11,"children":[{"id":90,"name":"ct_text_block","options":{"ct_id":90,"ct_parent":89,"selector":"text_block-90-125","original":{"color":"#ffffff"},"nicename":"Text (#24)","ct_content":"Payment Methods","activeselector":false},"depth":12},{"id":91,"name":"ct_text_block","options":{"ct_id":91,"ct_parent":89,"selector":"text_block-91-125","original":{"color":"#ffffff","font-size":"14"},"nicename":"Text (#25)","ct_content":"This is a block of text. Double-click this text to edit it.","activeselector":false},"depth":12}]},{"id":92,"name":"ct_div_block","options":{"ct_id":92,"ct_parent":84,"selector":"div_block-92-125","original":{"gap":"5"},"nicename":"Div (#63)","activeselector":""},"depth":11,"children":[{"id":93,"name":"ct_text_block","options":{"ct_id":93,"ct_parent":92,"selector":"text_block-93-125","original":{"color":"#ffffff"},"nicename":"Text (#24)","ct_content":"Payment Methods","activeselector":false},"depth":12},{"id":94,"name":"ct_text_block","options":{"ct_id":94,"ct_parent":92,"selector":"text_block-94-125","original":{"color":"#ffffff","font-size":"14"},"nicename":"Text (#25)","ct_content":"This is a block of text. Double-click this text to edit it.","activeselector":false},"depth":12}]},{"id":106,"name":"ct_div_block","options":{"ct_id":106,"ct_parent":84,"selector":"div_block-106-125","original":{"gap":"5"},"nicename":"Div (#106)","activeselector":""},"depth":11,"children":[{"id":107,"name":"ct_text_block","options":{"ct_id":107,"ct_parent":106,"selector":"text_block-107-125","original":{"color":"#ffffff"},"nicename":"Text (#24)","ct_content":"Payment Methods","activeselector":false},"depth":12},{"id":108,"name":"ct_text_block","options":{"ct_id":108,"ct_parent":106,"selector":"text_block-108-125","original":{"color":"#ffffff","font-size":"14"},"nicename":"Text (#25)","ct_content":"This is a block of text. Double-click this text to edit it.","activeselector":false},"depth":12}]},{"id":109,"name":"ct_div_block","options":{"ct_id":109,"ct_parent":84,"selector":"div_block-109-125","original":{"gap":"5"},"nicename":"Div (#109)","activeselector":""},"depth":11,"children":[{"id":110,"name":"ct_text_block","options":{"ct_id":110,"ct_parent":109,"selector":"text_block-110-125","original":{"color":"#ffffff"},"nicename":"Text (#24)","ct_content":"Payment Methods","activeselector":false},"depth":12},{"id":111,"name":"ct_text_block","options":{"ct_id":111,"ct_parent":109,"selector":"text_block-111-125","original":{"color":"#ffffff","font-size":"14"},"nicename":"Text (#25)","ct_content":"This is a block of text. Double-click this text to edit it.","activeselector":false},"depth":12}]},{"id":112,"name":"ct_div_block","options":{"ct_id":112,"ct_parent":84,"selector":"div_block-112-125","original":{"gap":"5"},"nicename":"Div (#112)","activeselector":""},"depth":11,"children":[{"id":113,"name":"ct_text_block","options":{"ct_id":113,"ct_parent":112,"selector":"text_block-113-125","original":{"color":"#ffffff"},"nicename":"Text (#24)","ct_content":"Payment Methods","activeselector":false},"depth":12},{"id":114,"name":"ct_text_block","options":{"ct_id":114,"ct_parent":112,"selector":"text_block-114-125","original":{"color":"#ffffff","font-size":"14"},"nicename":"Text (#25)","ct_content":"This is a block of text. Double-click this text to edit it.","activeselector":false},"depth":12}]}]}]}]}]}]},{"id":50,"name":"ct_div_block","options":{"ct_id":50,"ct_parent":8,"selector":"div_block-50-125","original":[],"nicename":"Link Simple","classes":["menu-pro-wrap-link","menu-pro-link-normal"],"activeselector":"menu-pro-link-normal","last-of-type":[]},"depth":6,"children":[{"id":51,"name":"ct_text_block","options":{"ct_id":51,"ct_parent":50,"selector":"text_block-51-125","original":{},"nicename":"Text (#16)","ct_content":"Pricing","activeselector":""},"depth":7}]},{"id":115,"name":"ct_div_block","options":{"ct_id":115,"ct_parent":8,"selector":"div_block-115-125","original":[],"nicename":"Link Simple","classes":["menu-pro-wrap-link","menu-pro-link-normal"],"activeselector":"menu-pro-link-normal","last-of-type":[]},"depth":6,"children":[{"id":116,"name":"ct_text_block","options":{"ct_id":116,"ct_parent":115,"selector":"text_block-116-125","original":{},"nicename":"Text (#16)","ct_content":"About","activeselector":""},"depth":7}]}]}]}]},{"id":9,"name":"ct_div_block","options":{"ct_id":9,"ct_parent":3,"selector":"div_block-9-125","original":{"background-color":"#ffffff","height":"40","text-align":"left","align-items":"center","justify-content":"center","padding-left":"15","padding-right":"15","border-radius":"0.8","border-radius-unit":"rem","font-weight":"700"},"nicename":"Btn Sign In","media":{"tablet":{"original":{"display":"none"}}}},"depth":3,"children":[{"id":55,"name":"ct_text_block","options":{"ct_id":55,"ct_parent":9,"selector":"text_block-55-125","original":{},"nicename":"Text (#55)","ct_content":"Sign in<br>","activeselector":false},"depth":4}]}]}]},"classes":{"x-mega":{"key":"x-mega","original":{"selector-locked":"true"}},"x-mega-activate":{"key":"x-mega-activate","original":{"custom-css":"cursor: pointer;","selector-locked":"true"}},"menu-pro-icons":{"original":{"display":"none","align-items":"center","justify-content":"center","position":"relative","width":"35","height":"35"},"media":{"tablet":{"original":{"display":"flex"}}},"key":"menu-pro-icons"},"menu-pro-icon-menu-open":{"original":{"transform":{"0":{"transform-type":"scale","scaleX":"0","scaleY":"0","scaleZ":"0"}},"icon-size":"35","icon-color":"#ffffff","position":"absolute"},"media":{"tablet":{"original":{"icon-size":"28"}}},"key":"menu-pro-icon-menu-open"},"menu-pro-icon-menu-close":{"original":{"transform":{"0":{"transform-type":"scale","scaleX":"1","scaleY":"1","scaleZ":"1"}}},"key":"menu-pro-icon-menu-close"},"menu-pro-icon-x-open":{"original":{"position":"absolute","icon-color":"#ffffff","icon-size":"25"},"key":"menu-pro-icon-x-open"},"menu-pro-icon-x-close":{"original":{"transform":{"0":{"transform-type":"scale","scaleX":"0","scaleY":"0","scaleZ":"0"}}},"key":"menu-pro-icon-x-close"},"menu-pro-wrap-open":{"media":{"tablet":{"original":{"top-unit":"%","width-unit":"%","border-radius-unit":"rem","position":"absolute","top":"100","width":"100","left":"0","padding-top":"15"}}},"original":{},"key":"menu-pro-wrap-open"},"menu-pro-wrap-close":{"media":{"tablet":{"original":{"transform":{"0":{"transform-type":"translate","translateY":"10"}},"opacity":"0","custom-css":"pointer-events: none;"}}},"original":{},"key":"menu-pro-wrap-close"},"menu-pro-links":{"media":{"tablet":{"original":{"width-unit":"%","border-radius-unit":"rem","width":"100","background-color":"#303030","border-radius":"1","display":"flex","flex-direction":"column","gap":"0"}}},"original":{"flex-direction":"row","display":"flex","align-items":"center","gap":"20"},"key":"menu-pro-links"},"menu-pro-wrap-link":{"media":{"tablet":{"original":{"width-unit":"%","height-unit":"auto","width":"100","display":"flex","padding-top":"15","padding-right":"20","padding-left":"20","border-bottom-style":"solid","border-bottom-width":"1","border-bottom-color":"#3a3a3a","color":"#ffffff","padding-bottom":"15"},"last-of-type":{"border-bottom-style":"none"}}},"original":{"height":"50","display":"flex"},"key":"menu-pro-wrap-link"},"menu-pro-link-open":{"media":{"tablet":{"original":{"width-unit":"%","width":"100","justify-content":"space-between","margin-bottom":"15"},"last-of-type":{"border-bottom-style":"none"}}},"original":{"color":"#afafaf","gap":"5","flex-direction":"row","display":"flex","align-items":"center"},"key":"menu-pro-link-open"},"menu-pro-link-close":{"original":{"color":"#ffffff","display":"flex","align-items":"center"},"media":{"tablet":{"original":{"margin-bottom":"0"}}},"key":"menu-pro-link-close"},"menu-pro-link-icon-open":{"original":{"transform":{"0":{"transform-type":"rotate","rotateAngle":"180"}},"icon-size":"20","icon-color":"#afafaf"},"key":"menu-pro-link-icon-open"},"menu-pro-link-icon-close":{"original":{"transform":{"0":{"transform-type":"rotate","rotateAngle":"0"}},"icon-color":"#ffffff","icon-size":"20"},"key":"menu-pro-link-icon-close"},"menu-pro-content-open":{"media":{"tablet":{"original":{"position":"static","padding-top":"0","overflow":"hidden","max-height":"1000"}}},"original":{"top-unit":"%","border-radius-unit":"rem","position":"absolute","top":"100","padding-top":"15"},"key":"menu-pro-content-open"},"menu-pro-content-close":{"media":{"tablet":{"original":{"transform":{"0":{"transform-type":"translate","translateY":"0"}},"max-height-unit":"px","opacity":"1","max-height":"0"}}},"original":{"transform":{"0":{"transform-type":"translate","translateY":"0"}},"opacity":"0","custom-css":"pointer-events: none;"},"key":"menu-pro-content-close"},"mega-pro-subcontent":{"original":{"border-radius-unit":"rem","background-color":"#303030","border-radius":"1","overflow":"hidden","padding-top":"15","padding-right":"15","padding-bottom":"15","padding-left":"15"},"media":{"tablet":{"original":{"padding-left":"0","padding-right":"0","border-radius":"0","max-height":"300","custom-css":"overflow-y: auto;","padding-top":"0","padding-bottom":"0"}}},"key":"mega-pro-subcontent"},"menu-pro-link-normal":{"original":{"flex-direction":"row","display":"flex","align-items":"center","color":"#ffffff","transition-duration":"0.2"},"hover":{"color":"#afafaf"},"key":"menu-pro-link-normal"}}}
JSON code mega menu
{"component":{"id":15,"name":"ct_code_block","options":{"ct_id":15,"ct_parent":0,"selector":"code_block-15-125","original":{"code-js":"function isTouchDevice() {\n return (\"ontouchstart\" in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);\n}\n\ndocument.addEventListener(\"click\", event => {\n const openButton = event.target.closest(\".x-mega-activate\");\n const closeButton = event.target.closest(\".x-mega-close\");\n const mmDeactivateButton = event.target.closest(\".x-mega-deactivate\");\n const xMega = event.target.closest(\".x-mega\");\n const isAngularEnv = !!window.angular;\n\n function getScopedElements(parentMega) {\n return Array.from(parentMega.querySelectorAll(\"*\")).filter(element => {\n const closestMega = element.closest(\".x-mega\");\n return !closestMega || closestMega === parentMega;\n });\n }\n\n function closeAllXmegasExcept(parentMega) {\n document.querySelectorAll(\".x-mega\").forEach(mega => {\n if (mega !== parentMega && !mega.contains(parentMega)) {\n const elements = getScopedElements(mega);\n elements.forEach(element => {\n Array.from(element.classList).forEach(cls => {\n if (cls.endsWith(\"-open\") && !cls.startsWith(\"ct-\")) {\n element.classList.add(cls.replace(\"-open\", \"-close\"));\n }\n });\n });\n }\n });\n }\n\n function closeChildXmegas(parentMega) {\n parentMega.querySelectorAll(\".x-mega\").forEach(childMega => {\n const elements = getScopedElements(childMega);\n elements.forEach(element => {\n Array.from(element.classList).forEach(cls => {\n if (cls.endsWith(\"-open\") && !cls.startsWith(\"ct-\")) {\n element.classList.add(cls.replace(\"-open\", \"-close\"));\n }\n });\n });\n });\n }\n\n if (openButton) {\n const parentMega = openButton.closest(\".x-mega\");\n if (!parentMega) return;\n let megaMode = parentMega.getAttribute(\"data-mega-open\");\n if (isTouchDevice() && megaMode === \"hover\") {\n megaMode = \"click\";\n }\n if (megaMode === \"click\" || (megaMode === \"hover\" && isAngularEnv)) {\n event.preventDefault();\n closeAllXmegasExcept(parentMega);\n closeChildXmegas(parentMega);\n const elements = getScopedElements(parentMega);\n const isActive = elements.some(element =>\n Array.from(element.classList).some(cls => cls.endsWith(\"-close\"))\n );\n let scrollBehavior = parentMega.getAttribute(\"data-mega-scroll\") || \"never\";\n const isNested = !!(parentMega.parentElement && parentMega.parentElement.closest(\".x-mega\"));\n if (isActive) {\n elements.forEach(element => {\n Array.from(element.classList).forEach(cls => {\n if (cls.endsWith(\"-close\")) {\n element.classList.remove(cls);\n }\n });\n });\n if (!isNested) {\n if (scrollBehavior === \"always\") {\n document.body.style.overflow = \"hidden\";\n } else if (scrollBehavior.endsWith(\"px\")) {\n let pxValue = parseInt(scrollBehavior.replace(\"px\", \"\"));\n if (window.innerWidth <= pxValue) {\n document.body.style.overflow = \"hidden\";\n }\n }\n }\n } else {\n elements.forEach(element => {\n Array.from(element.classList).forEach(cls => {\n if (cls.endsWith(\"-open\") && !cls.startsWith(\"ct-\")) {\n element.classList.add(cls.replace(\"-open\", \"-close\"));\n }\n });\n });\n if (!isNested) {\n document.body.style.overflow = \"\";\n }\n }\n }\n }\n\n if (closeButton) {\n const parentMega = closeButton.closest(\".x-mega\");\n if (!parentMega) return;\n const elements = getScopedElements(parentMega);\n elements.forEach(element => {\n Array.from(element.classList).forEach(cls => {\n if (cls.endsWith(\"-close\")) {\n element.classList.remove(cls);\n }\n });\n });\n let scrollBehavior = parentMega.getAttribute(\"data-mega-scroll\") || \"never\";\n const isNested = !!(parentMega.parentElement && parentMega.parentElement.closest(\".x-mega\"));\n if (!isNested) {\n if (scrollBehavior === \"always\") {\n document.body.style.overflow = \"\";\n } else if (scrollBehavior.endsWith(\"px\")) {\n let pxValue = parseInt(scrollBehavior.replace(\"px\", \"\"));\n if (window.innerWidth <= pxValue) {\n document.body.style.overflow = \"\";\n }\n }\n }\n }\n\n if (mmDeactivateButton) {\n const parentMega = mmDeactivateButton.closest(\".x-mega\");\n if (!parentMega) return;\n const mmElements = getScopedElements(parentMega);\n mmElements.forEach(mmElement => {\n Array.from(mmElement.classList).forEach(mmCls => {\n if (mmCls.endsWith(\"-open\") && !mmCls.startsWith(\"ct-\")) {\n mmElement.classList.add(mmCls.replace(\"-open\", \"-close\"));\n }\n });\n });\n let scrollBehavior = parentMega.getAttribute(\"data-mega-scroll\") || \"never\";\n const isNested = !!(parentMega.parentElement && parentMega.parentElement.closest(\".x-mega\"));\n if (!isNested) {\n if (scrollBehavior === \"always\") {\n document.body.style.overflow = \"\";\n } else if (scrollBehavior.endsWith(\"px\")) {\n let pxValue = parseInt(scrollBehavior.replace(\"px\", \"\"));\n if (window.innerWidth <= pxValue) {\n document.body.style.overflow = \"\";\n }\n }\n }\n }\n\n if (!isAngularEnv && !xMega) {\n document.querySelectorAll(\".x-mega\").forEach(mega => {\n let closeBack = mega.getAttribute(\"data-mega-close-back\") || \"true\";\n if (closeBack === \"true\") {\n const elements = getScopedElements(mega);\n elements.forEach(element => {\n Array.from(element.classList).forEach(cls => {\n if (cls.endsWith(\"-open\") && !cls.startsWith(\"ct-\")) {\n element.classList.add(cls.replace(\"-open\", \"-close\"));\n }\n });\n });\n let scrollBehavior = mega.getAttribute(\"data-mega-scroll\") || \"never\";\n const isNested = !!(mega.parentElement && mega.parentElement.closest(\".x-mega\"));\n if (!isNested) {\n if (scrollBehavior === \"always\" || (scrollBehavior.endsWith(\"px\") && window.innerWidth <= parseInt(scrollBehavior.replace(\"px\", \"\")))) {\n document.body.style.overflow = \"\";\n }\n }\n }\n });\n }\n\n if (xMega) {\n const parentMegas = Array.from(xMega.closest(\".x-mega\") ? [xMega.closest(\".x-mega\")] : []);\n parentMegas.forEach(parentMega => {\n closeChildXmegas(parentMega);\n });\n }\n});\n\nfunction setupHoverOrClick() {\n const isAngularEnv = !!window.angular;\n const touchDevice = isTouchDevice();\n document.querySelectorAll(\".x-mega\").forEach(mega => {\n const megaMode = mega.getAttribute(\"data-mega-open\");\n let effectiveMegaMode = megaMode;\n if (touchDevice && megaMode === \"hover\") {\n effectiveMegaMode = \"click\";\n }\n if (effectiveMegaMode === \"hover\" && !isAngularEnv) {\n mega.addEventListener(\"mouseenter\", () => {\n const elements = Array.from(mega.querySelectorAll(\"*\")).filter(element =>\n !element.closest(\".x-mega\") || element.closest(\".x-mega\") === mega\n );\n elements.forEach(element => {\n Array.from(element.classList).forEach(cls => {\n if (cls.endsWith(\"-open\") && !cls.startsWith(\"ct-\")) {\n element.classList.remove(cls.replace(\"-open\", \"-close\"));\n }\n });\n });\n });\n mega.addEventListener(\"mouseleave\", () => {\n const elements = Array.from(mega.querySelectorAll(\"*\")).filter(element =>\n !element.closest(\".x-mega\") || element.closest(\".x-mega\") === mega\n );\n elements.forEach(element => {\n Array.from(element.classList).forEach(cls => {\n if (cls.endsWith(\"-open\") && !cls.startsWith(\"ct-\")) {\n element.classList.add(cls.replace(\"-open\", \"-close\"));\n }\n });\n });\n closeChildXmegas(mega);\n });\n }\n });\n}\n\nfunction closeChildXmegas(parentMega) {\n parentMega.querySelectorAll(\".x-mega\").forEach(childMega => {\n const elements = Array.from(childMega.querySelectorAll(\"*\")).filter(element =>\n !element.closest(\".x-mega\") || element.closest(\".x-mega\") === childMega\n );\n elements.forEach(element => {\n Array.from(element.classList).forEach(cls => {\n if (cls.endsWith(\"-open\") && !cls.startsWith(\"ct-\")) {\n element.classList.add(cls.replace(\"-open\", \"-close\"));\n }\n });\n });\n });\n}\n\nfunction applyMegaTransitions() {\n document.querySelectorAll(\".x-mega\").forEach(mega => {\n const transitionValue = mega.getAttribute(\"data-mega-transition\") || \"0s\";\n const elements = Array.from(mega.querySelectorAll(\"*\")).filter(element =>\n Array.from(element.classList).some(cls => cls.endsWith(\"-close\"))\n );\n elements.forEach(element => {\n element.style.transition = \"0s\";\n requestAnimationFrame(() => {\n element.style.transition = transitionValue;\n });\n });\n });\n}\n\nsetupHoverOrClick();\napplyMegaTransitions();\n","code-php":"<!---->"},"nicename":"Code JS MEGA","activeselector":false},"depth":1},"classes":{}}
JSON MEGA MENU Base
{"component":{"id":28,"name":"ct_div_block","options":{"ct_id":28,"ct_parent":26,"selector":"div_block-28-25","original":{"custom-attributes":[{"name":"data-mega-open","value":"click"},{"name":"data-mega-transition","value":"0.3s"},{"name":"data-mega-scroll","value":"never"},{"name":"data-mega-close-back","value":"true"}]},"nicename":"Mega","classes":["x-mega"],"activeselector":"x-mega"},"depth":3,"children":[{"id":30,"name":"ct_div_block","options":{"ct_id":30,"ct_parent":28,"selector":"div_block-30-25","original":{},"nicename":"Deactivate","classes":["x-mega-deactivate"],"activeselector":"x-mega-deactivate"},"depth":4},{"id":29,"name":"ct_div_block","options":{"ct_id":29,"ct_parent":28,"selector":"div_block-29-25","original":{},"nicename":"Activate","classes":["x-mega-activate"],"activeselector":"x-mega-activate"},"depth":4},{"id":32,"name":"ct_div_block","options":{"ct_id":32,"ct_parent":28,"selector":"div_block-32-25","original":{},"nicename":"Content"},"depth":4}]},"classes":{"x-mega":{"original":{"selector-locked":"true"},"key":"x-mega"},"x-mega-deactivate":{"original":{"custom-css":"cursor: pointer;","selector-locked":"true"},"key":"x-mega-deactivate"},"x-mega-activate":{"original":{"custom-css":"cursor: pointer;","selector-locked":"true"},"key":"x-mega-activate"}}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment