Skip to content

Instantly share code, notes, and snippets.

@hssktm

hssktm/gist:00753191ef9d4b3daad89c181243495d

Created March 25, 2025 06:05
Show Gist options
  • Save hssktm/00753191ef9d4b3daad89c181243495d to your computer and use it in GitHub Desktop.
Save hssktm/00753191ef9d4b3daad89c181243495d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
This element works as follows: there are several key classes like x-mega,
and within this, you can use x-mega-activate to activate the mega menu.
Additionally, you can use x-mega-activate and x-mega-deactivate to activate
or deactivate the menu, respectively.
x-mega contains some key attributes that you can use to configure the mega menu,
such as data-mega-open, which lets you activate the menu with a click or hover.
There is also data-mega-transition, which you can set, for example, to 0.5s to
define the animation duration. Similarly, there is data-mega-scroll, which you
can set to always to disable the body scroll when pressing the scroll, or to
never so the scroll continues even when you press it.
Another attribute is data-mega-close-back, which you can set to true to close
the menu when clicking outside x-mega, or false to prevent it from closing
when clicking outside.
The configuration is very simple. To design, you just need to add content
inside x-mega. For example, if I want to create a button, I first add the
class x-mega-activate to make it work as the activator. Then, to the
same element, I add two classes, such as menu-btn-open and menu-btn-close.
That is, the classes must end with -open or -close, which determines how it
looks when active (-open) and when closed (-close). Although it may sound
a bit confusing, once you master it, you’ll see that creating mega menus
is easy and fast.
Let me give you another example: for the content, you can
use menu-content-open. For instance, you can set it with
position: absolute and a top of 50px. For menu-content-close,
you can set opacity: 0 and pointer-events: none. This way,
when the -close class is removed, the content will appear.
That’s how simple the code works.
Now, to load the JS, you can use a code block and place it between
<script> tags, or you can also download a plugin I use to load JS or CSS
locally inside <link> or <script> tags. This plugin has been adapted for
Builderius, and it will allow you to load it into Builderius without any
issues, allowing you to use this element freely.
////JSON
{"modules":{"u1a5cff07f":{"id":"u1a5cff07f","name":"HtmlElement","label":"div","settings":[{"name":"css","value":"%root% {\n font-family: Verdana;\n position: absolute;\n width: 100%;\n top: 20px;\n max-width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-left: 20px;\n padding-right: 20px\n}\n@media (--tablet) {\n %root% {\n top: 0;\n padding-left: 0;\n padding-right: 0\n }\n}"},{"name":"tag","value":"div"}],"parent":""},"u6d44ee6c7":{"id":"u6d44ee6c7","name":"HtmlElement","label":"nav","settings":[{"name":"tag","value":"nav"},{"name":"css","value":"%root% {\n margin-left: auto;\n margin-right: auto;\n width: 100%;\n position: relative;\n height: 60px;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: rgb(13, 13, 13);\n max-width: 1040px;\n padding-left: 20px;\n padding-right: 20px;\n justify-content: space-between;\n border-top-left-radius: 15px;\n border-top-right-radius: 15px;\n border-bottom-right-radius: 15px;\n border-bottom-left-radius: 15px\n}\n@media (--tablet) {\n %root% {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n padding-left: 10px;\n padding-right: 10px\n }\n}"}],"parent":"u1a5cff07f","index":0},"u5c3bd09e5":{"id":"u5c3bd09e5","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n width: 50%;\n display: flex;\n flex-direction: column;\n gap: 20px\n}\n@media (--mobile) {\n %root% {\n width: 100%\n }\n}"}],"parent":"u84f5732e5","index":0},"u9dc9448a0":{"id":"u9dc9448a0","name":"HtmlElement","label":"Heading","settings":[{"name":"content","value":"Company"},{"name":"tag","value":"h2"},{"name":"css","value":"%root% {\n font-size: 14px;\n font-weight: 400;\n color: rgb(150, 150, 150)\n}"}],"parent":"u5c3bd09e5","index":0},"u605321e47":{"id":"u605321e47","name":"HtmlElement","label":"img","settings":[{"name":"tag","value":"img"},{"name":"htmlAttribute","value":[{"name":"src","value":"https://test.reyescode.com/wp-content/uploads/2025/03/fc_entertainment_4a87c0f53.jpg"}]},{"name":"css","value":"%root% {\n width: 80px;\n height: 80px;\n object-fit: cover;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n min-height: 80px;\n min-width: 80px\n}"}],"parent":"u0fa0dd9ca","index":0},"ubc5164194":{"id":"ubc5164194","name":"HtmlElement","label":"h4","settings":[{"name":"content","value":"Stocks"},{"name":"tag","value":"h4"}],"parent":"ud0a0917ea","index":0},"u6ec34a678":{"id":"u6ec34a678","name":"HtmlElement","label":"img","settings":[{"name":"tag","value":"img"},{"name":"htmlAttribute","value":[{"name":"src","value":"https://test.reyescode.com/wp-content/uploads/2025/03/fc_productivity_1bc824ba6.jpg"}]},{"name":"css","value":"%root% {\n width: 80px;\n height: 80px;\n object-fit: cover;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n min-height: 80px;\n min-width: 80px\n}"}],"parent":"ufe440bc2a","index":0},"u82569c6ee":{"id":"u82569c6ee","name":"HtmlElement","label":"h4","settings":[{"name":"content","value":"Stocks"},{"name":"tag","value":"h4"}],"parent":"udbe25096c","index":0},"u78b68ed4e":{"id":"u78b68ed4e","name":"HtmlElement","label":"img","settings":[{"name":"tag","value":"img"},{"name":"htmlAttribute","value":[{"name":"src","value":"https://test.reyescode.com/wp-content/uploads/2025/03/fc_learning_bc8125962.jpg"}]},{"name":"css","value":"%root% {\n width: 80px;\n height: 80px;\n object-fit: cover;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n min-height: 80px;\n min-width: 80px\n}"}],"parent":"u7dfbbb212","index":0},"ua36f551f6":{"id":"ua36f551f6","name":"HtmlElement","label":"h4","settings":[{"name":"content","value":"Stocks"},{"name":"tag","value":"h4"}],"parent":"u546998a24","index":0},"u317a8ba84":{"id":"u317a8ba84","name":"HtmlElement","label":"Heading","settings":[{"name":"content","value":"Company"},{"name":"tag","value":"h2"},{"name":"css","value":"%root% {\n font-size: 14px;\n font-weight: 400;\n color: rgb(150, 150, 150)\n}"}],"parent":"ue3eeac8c6","index":0},"u74137862a":{"id":"u74137862a","name":"HtmlElement","label":"img","settings":[{"name":"tag","value":"img"},{"name":"htmlAttribute","value":[{"name":"src","value":"https://test.reyescode.com/wp-content/uploads/2025/03/fc_entertainment_4a87c0f53.jpg"}]},{"name":"css","value":"%root% {\n width: 80px;\n height: 80px;\n object-fit: cover;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n min-height: 80px;\n min-width: 80px\n}"}],"parent":"u7439f94d5","index":0},"ub86b9f488":{"id":"ub86b9f488","name":"HtmlElement","label":"h4","settings":[{"name":"content","value":"Stocks"},{"name":"tag","value":"h4"}],"parent":"u683b78d02","index":0},"u9da17771e":{"id":"u9da17771e","name":"HtmlElement","label":"img","settings":[{"name":"tag","value":"img"},{"name":"htmlAttribute","value":[{"name":"src","value":"https://test.reyescode.com/wp-content/uploads/2025/03/fc_productivity_1bc824ba6.jpg"}]},{"name":"css","value":"%root% {\n width: 80px;\n height: 80px;\n object-fit: cover;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n min-height: 80px;\n min-width: 80px\n}"}],"parent":"u1004bd3a7","index":0},"u0e9579e47":{"id":"u0e9579e47","name":"HtmlElement","label":"h4","settings":[{"name":"content","value":"Stocks"},{"name":"tag","value":"h4"}],"parent":"u610b71d95","index":0},"uc6ee11956":{"id":"uc6ee11956","name":"HtmlElement","label":"img","settings":[{"name":"tag","value":"img"},{"name":"htmlAttribute","value":[{"name":"src","value":"https://test.reyescode.com/wp-content/uploads/2025/03/fc_learning_bc8125962.jpg"}]},{"name":"css","value":"%root% {\n width: 80px;\n height: 80px;\n object-fit: cover;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n min-height: 80px;\n min-width: 80px\n}"}],"parent":"u050fdc059","index":0},"ucf72982e4":{"id":"ucf72982e4","name":"HtmlElement","label":"h4","settings":[{"name":"content","value":"Stocks"},{"name":"tag","value":"h4"}],"parent":"u1ebc97bab","index":0},"u15d4df920":{"id":"u15d4df920","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n width: 100%;\n height: 40px;\n background-color: rgb(217, 217, 217);\n padding-left: 20px;\n padding-right: 20px;\n display: none;\n flex-direction: row;\n align-items: center\n}\n@media (--tablet) {\n %root% {\n display: flex;\n flex-direction: row;\n justify-content: space-between\n }\n}"}],"parent":"u97e29200c","index":0},"ucccd014bd":{"id":"ucccd014bd","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"PRODUCTS"},{"name":"tag","value":"p"},{"name":"css","value":"@media (--tablet) {\n %root% {\n font-size: 14px;\n letter-spacing: 1.2px;\n font-weight: 600\n }\n}"}],"parent":"u15d4df920","index":0},"u89d0e873d":{"id":"u89d0e873d","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"tagClass","value":["x-mega-activate","menu-pro-btn-open","menu-pro-btn-close"]},{"name":"css","value":"%root% {\n font-size: 16px;\n gap: 3px\n}\n@media (--tablet) {\n %root% {\n border-bottom: 1px solid;\n border-color: rgb(234, 234, 234)\n }\n}"}],"parent":"u843c11be2","index":0},"u14acc76e0":{"id":"u14acc76e0","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Products"},{"name":"tag","value":"p"},{"name":"css","value":"%root% {\n margin-top: 0;\n margin-bottom: 0\n}\n@media (--tablet) {\n %root% {\n font-size: 18px\n }\n}"}],"parent":"u89d0e873d","index":0},"u693a5593a":{"id":"u693a5593a","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"tagClass","value":["x-mega-activate","menu-pro-btn-open","menu-pro-btn-close"]},{"name":"css","value":"%root% {\n font-size: 16px;\n gap: 3px\n}\n@media (--tablet) {\n %root% {\n border-bottom: 1px solid;\n border-color: rgb(234, 234, 234)\n }\n}"}],"parent":"u9bfee5688","index":0},"ub4d4b68c2":{"id":"ub4d4b68c2","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Services"},{"name":"tag","value":"p"},{"name":"css","value":"%root% {\n margin-top: 0;\n margin-bottom: 0\n}\n@media (--tablet) {\n %root% {\n font-size: 18px\n }\n}"}],"parent":"u693a5593a","index":0},"u2439730fd":{"id":"u2439730fd","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n width: 100%;\n height: 40px;\n background-color: rgb(217, 217, 217);\n padding-left: 20px;\n padding-right: 20px;\n display: none;\n flex-direction: row;\n align-items: center\n}\n@media (--tablet) {\n %root% {\n display: flex;\n flex-direction: row;\n justify-content: space-between\n }\n}"}],"parent":"uf395122e0","index":0},"u47c1bd20d":{"id":"u47c1bd20d","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"SERVICES"},{"name":"tag","value":"p"},{"name":"css","value":"@media (--tablet) {\n %root% {\n font-size: 14px;\n letter-spacing: 1.2px;\n font-weight: 600\n }\n}"}],"parent":"u2439730fd","index":0},"u59541bbc1":{"id":"u59541bbc1","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n width: 50%;\n display: flex;\n flex-direction: column;\n gap: 20px\n}\n@media (--mobile) {\n %root% {\n width: 100%\n }\n}"}],"parent":"u9f1c27813","index":0},"u79f7557f7":{"id":"u79f7557f7","name":"HtmlElement","label":"Heading","settings":[{"name":"content","value":"Company"},{"name":"tag","value":"h2"},{"name":"css","value":"%root% {\n font-size: 14px;\n font-weight: 400;\n color: rgb(150, 150, 150)\n}"}],"parent":"u59541bbc1","index":0},"u2e1352d14":{"id":"u2e1352d14","name":"HtmlElement","label":"img","settings":[{"name":"tag","value":"img"},{"name":"htmlAttribute","value":[{"name":"src","value":"https://test.reyescode.com/wp-content/uploads/2025/03/fc_entertainment_4a87c0f53.jpg"}]},{"name":"css","value":"%root% {\n width: 80px;\n height: 80px;\n object-fit: cover;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n min-height: 80px;\n min-width: 80px\n}"}],"parent":"u3f45ac3fc","index":0},"u20321dc2c":{"id":"u20321dc2c","name":"HtmlElement","label":"h4","settings":[{"name":"content","value":"Stocks"},{"name":"tag","value":"h4"}],"parent":"uef43f5fc2","index":0},"ua82d2584b":{"id":"ua82d2584b","name":"HtmlElement","label":"img","settings":[{"name":"tag","value":"img"},{"name":"htmlAttribute","value":[{"name":"src","value":"https://test.reyescode.com/wp-content/uploads/2025/03/fc_productivity_1bc824ba6.jpg"}]},{"name":"css","value":"%root% {\n width: 80px;\n height: 80px;\n object-fit: cover;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n min-height: 80px;\n min-width: 80px\n}"}],"parent":"u9d830e948","index":0},"u699b677a9":{"id":"u699b677a9","name":"HtmlElement","label":"h4","settings":[{"name":"content","value":"Stocks"},{"name":"tag","value":"h4"}],"parent":"u7cff4892a","index":0},"u49661b1d9":{"id":"u49661b1d9","name":"HtmlElement","label":"img","settings":[{"name":"tag","value":"img"},{"name":"htmlAttribute","value":[{"name":"src","value":"https://test.reyescode.com/wp-content/uploads/2025/03/fc_learning_bc8125962.jpg"}]},{"name":"css","value":"%root% {\n width: 80px;\n height: 80px;\n object-fit: cover;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n min-height: 80px;\n min-width: 80px\n}"}],"parent":"ubf57695c6","index":0},"u8c9b71b61":{"id":"u8c9b71b61","name":"HtmlElement","label":"h4","settings":[{"name":"content","value":"Stocks"},{"name":"tag","value":"h4"}],"parent":"u1ef4cfd18","index":0},"ue26d903fc":{"id":"ue26d903fc","name":"HtmlElement","label":"Heading","settings":[{"name":"content","value":"Company"},{"name":"tag","value":"h2"},{"name":"css","value":"%root% {\n font-size: 14px;\n font-weight: 400;\n color: rgb(150, 150, 150)\n}"}],"parent":"ub2a940e22","index":0},"u8b72e660b":{"id":"u8b72e660b","name":"HtmlElement","label":"Link Simple","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n font-size: 16px;\n gap: 3px\n}\n@media (--tablet) {\n %root% {\n border-right-color: rgb(234, 234, 234);\n border-left-color: rgb(234, 234, 234);\n border-top: 1px solid rgb(243, 243, 243);\n border-bottom: 1px solid rgb(234, 234, 234)\n }\n}"},{"name":"tagClass","value":["menu-link-normal"]}],"parent":"u13be466cd","index":0},"u4a73f7b83":{"id":"u4a73f7b83","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Partners"},{"name":"tag","value":"p"},{"name":"css","value":"%root% {\n margin-top: 0;\n margin-bottom: 0\n}\n@media (--tablet) {\n %root% {\n font-size: 18px\n }\n}"}],"parent":"u8b72e660b","index":0},"u8355f7d43":{"id":"u8355f7d43","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Business"},{"name":"tag","value":"p"},{"name":"css","value":"%root% {\n margin-top: 0;\n margin-bottom: 0\n}\n@media (--tablet) {\n %root% {\n font-size: 18px\n }\n}"}],"parent":"u233ca9c47","index":0},"u93526f10a":{"id":"u93526f10a","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Premium"},{"name":"tag","value":"p"},{"name":"css","value":"%root% {\n margin-top: 0;\n margin-bottom: 0\n}\n@media (--tablet) {\n %root% {\n font-size: 18px\n }\n}"}],"parent":"u985634707","index":0},"uee78f9caf":{"id":"uee78f9caf","name":"HtmlElement","label":"BTN mobile","settings":[{"name":"tag","value":"div"},{"name":"tagClass","value":["x-mega-activate"]},{"name":"css","value":"%root% {\n width: 75px;\n height: 40px;\n position: relative;\n display: none;\n flex-direction: row;\n align-items: center;\n justify-content: center\n}\n@media (--tablet) {\n %root% {\n display: flex\n }\n}"}],"parent":"u4897827f1","index":0},"u462eac760":{"id":"u462eac760","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"[ menu ]"},{"name":"tag","value":"p"},{"name":"tagClass","value":["menu-pro-true-open","menu-pro-true-close"]},{"name":"css","value":"%root% {\n color: rgb(232, 228, 228)\n}"}],"parent":"uee78f9caf","index":0},"u64d1778d2":{"id":"u64d1778d2","name":"HtmlElement","label":"img","settings":[{"name":"tag","value":"img"},{"name":"htmlAttribute","value":[{"name":"src","value":"https://test.reyescode.com/wp-content/uploads/2025/03/logo-builderius.webp"}]},{"name":"css","value":"%root% {\n max-height: 40px\n}\n@media (--tablet) {\n %root% {\n max-height: 30px\n }\n}"}],"parent":"u6d44ee6c7","index":0},"u4897827f1":{"id":"u4897827f1","name":"HtmlElement","label":"Wrap Mega","settings":[{"name":"tag","value":"div"},{"name":"tagClass","value":["x-mega"]},{"name":"htmlAttribute","value":[{"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"}]},{"name":"css","value":"%root% {\n display: flex;\n flex-direction: row;\n align-items: center\n}"}],"parent":"u6d44ee6c7","index":1},"u13be466cd":{"id":"u13be466cd","name":"HtmlElement","label":"Links","settings":[{"name":"tag","value":"div"},{"name":"tagClass","value":["menu-pro-menu-open","menu-pro-menu-close"]},{"name":"css","value":"@media (--tablet) {\n %root% {\n align-items: start;\n gap: 0px;\n border-style: none\n }\n}"}],"parent":"u4897827f1","index":1},"u843c11be2":{"id":"u843c11be2","name":"HtmlElement","label":"Mega","settings":[{"name":"tag","value":"div"},{"name":"tagClass","value":["x-mega"]},{"name":"htmlAttribute","value":[{"name":"data-mega-open","value":"hover"},{"name":"data-mega-transition","value":"0.3s"},{"name":"data-mega-scroll","value":"always"},{"name":"data-mega-close-back","value":"true"}]},{"name":"css","value":"%root% {}\n@media (--tablet) {\n %root% {\n width: 100%\n }\n}"}],"parent":"u13be466cd","index":1},"u97e29200c":{"id":"u97e29200c","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"tagClass","value":["menu-pro-content-open","menu-pro-content-close"]},{"name":"css","value":"%root% {\n width: 100%\n}\n@media (--desktop) {\n %root% {\n width: 100%\n }\n}"}],"parent":"u843c11be2","index":1},"u84f5732e5":{"id":"u84f5732e5","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n background-color: rgb(255, 255, 255);\n padding: 20px;\n display: flex;\n flex-direction: row;\n gap: 40px;\n border-top-left-radius: 15px;\n border-top-right-radius: 15px;\n border-bottom-right-radius: 15px;\n border-bottom-left-radius: 15px\n}\n@media (--tablet) {\n %root% {\n overflow-y: auto;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n height: calc(100dvh - 100px)\n }\n}\n@media (--mobile) {\n %root% {\n display: flex;\n flex-direction: column\n }\n}"}],"parent":"u97e29200c","index":1},"u0fa0dd9ca":{"id":"u0fa0dd9ca","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n gap: 20px;\n flex-direction: row;\n align-items: center\n}"},{"name":"tagClass","value":["menu-pro-option","menu-pro-option:hover"]}],"parent":"u5c3bd09e5","index":1},"ud0a0917ea":{"id":"ud0a0917ea","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n flex-direction: column;\n gap: 5px\n}"}],"parent":"u0fa0dd9ca","index":1},"ua345359f6":{"id":"ua345359f6","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Lorem ipsum dolor sit amet.\n"},{"name":"tag","value":"p"}],"parent":"ud0a0917ea","index":1},"udbe25096c":{"id":"udbe25096c","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n flex-direction: column;\n gap: 5px\n}"}],"parent":"ufe440bc2a","index":1},"u6f3e366d1":{"id":"u6f3e366d1","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Lorem ipsum dolor sit amet.\n"},{"name":"tag","value":"p"}],"parent":"udbe25096c","index":1},"u546998a24":{"id":"u546998a24","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n flex-direction: column;\n gap: 5px\n}"}],"parent":"u7dfbbb212","index":1},"u06b463e36":{"id":"u06b463e36","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Lorem ipsum dolor sit amet.\n"},{"name":"tag","value":"p"}],"parent":"u546998a24","index":1},"ue3eeac8c6":{"id":"ue3eeac8c6","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n width: 50%;\n display: flex;\n flex-direction: column;\n gap: 20px\n}\n@media (--mobile) {\n %root% {\n width: 100%\n }\n}"}],"parent":"u84f5732e5","index":1},"u7439f94d5":{"id":"u7439f94d5","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n gap: 20px;\n flex-direction: row;\n align-items: center\n}"},{"name":"tagClass","value":["menu-pro-option","menu-pro-option:hover"]}],"parent":"ue3eeac8c6","index":1},"u683b78d02":{"id":"u683b78d02","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n flex-direction: column;\n gap: 5px\n}"}],"parent":"u7439f94d5","index":1},"u3553f3ca0":{"id":"u3553f3ca0","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Lorem ipsum dolor sit amet.\n"},{"name":"tag","value":"p"}],"parent":"u683b78d02","index":1},"u610b71d95":{"id":"u610b71d95","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n flex-direction: column;\n gap: 5px\n}"}],"parent":"u1004bd3a7","index":1},"u095550cd9":{"id":"u095550cd9","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Lorem ipsum dolor sit amet.\n"},{"name":"tag","value":"p"}],"parent":"u610b71d95","index":1},"u1ebc97bab":{"id":"u1ebc97bab","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n flex-direction: column;\n gap: 5px\n}"}],"parent":"u050fdc059","index":1},"u13a66d84d":{"id":"u13a66d84d","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Lorem ipsum dolor sit amet.\n"},{"name":"tag","value":"p"}],"parent":"u1ebc97bab","index":1},"u7cf32ef50":{"id":"u7cf32ef50","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"<- Return "},{"name":"tag","value":"p"},{"name":"tagClass","value":["x-mega-deactivate"]},{"name":"css","value":"%root% {\n font-size: 14px\n}"}],"parent":"u15d4df920","index":1},"u3b1484d43":{"id":"u3b1484d43","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"+"},{"name":"tag","value":"p"},{"name":"css","value":"%root% {\n margin-top: 0;\n margin-bottom: 0;\n font-weight: 900\n}\n@media (--tablet) {\n %root% {\n font-size: 18px\n }\n}"},{"name":"tagClass","value":["menu-pro-plus-open","menu-pro-plus-close"]}],"parent":"u89d0e873d","index":1},"u5042b11b5":{"id":"u5042b11b5","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"+"},{"name":"tag","value":"p"},{"name":"css","value":"%root% {\n margin-top: 0;\n margin-bottom: 0;\n font-weight: 900\n}\n@media (--tablet) {\n %root% {\n font-size: 18px\n }\n}"},{"name":"tagClass","value":["menu-pro-plus-open","menu-pro-plus-close"]}],"parent":"u693a5593a","index":1},"uf395122e0":{"id":"uf395122e0","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"tagClass","value":["menu-pro-content-open","menu-pro-content-close"]},{"name":"css","value":"%root% {\n width: 100%\n}\n@media (--desktop) {\n %root% {\n width: 100%\n }\n}"}],"parent":"u9bfee5688","index":1},"u1847cef77":{"id":"u1847cef77","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"<- Return "},{"name":"tag","value":"p"},{"name":"tagClass","value":["x-mega-deactivate"]},{"name":"css","value":"%root% {\n font-size: 14px\n}"}],"parent":"u2439730fd","index":1},"u9f1c27813":{"id":"u9f1c27813","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n background-color: rgb(255, 255, 255);\n padding: 20px;\n display: flex;\n flex-direction: row;\n gap: 40px;\n border-top-left-radius: 15px;\n border-top-right-radius: 15px;\n border-bottom-right-radius: 15px;\n border-bottom-left-radius: 15px\n}\n@media (--tablet) {\n %root% {\n overflow-y: auto;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n height: calc(100dvh - 100px)\n }\n}\n@media (--mobile) {\n %root% {\n display: flex;\n flex-direction: column\n }\n}"}],"parent":"uf395122e0","index":1},"u3f45ac3fc":{"id":"u3f45ac3fc","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n gap: 20px;\n flex-direction: row;\n align-items: center\n}"},{"name":"tagClass","value":["menu-pro-option","menu-pro-option:hover"]}],"parent":"u59541bbc1","index":1},"uef43f5fc2":{"id":"uef43f5fc2","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n flex-direction: column;\n gap: 5px\n}"}],"parent":"u3f45ac3fc","index":1},"uf7f3b6710":{"id":"uf7f3b6710","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Lorem ipsum dolor sit amet.\n"},{"name":"tag","value":"p"}],"parent":"uef43f5fc2","index":1},"u7cff4892a":{"id":"u7cff4892a","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n flex-direction: column;\n gap: 5px\n}"}],"parent":"u9d830e948","index":1},"u78fa00db3":{"id":"u78fa00db3","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Lorem ipsum dolor sit amet.\n"},{"name":"tag","value":"p"}],"parent":"u7cff4892a","index":1},"u1ef4cfd18":{"id":"u1ef4cfd18","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n flex-direction: column;\n gap: 5px\n}"}],"parent":"ubf57695c6","index":1},"u4f22cdba9":{"id":"u4f22cdba9","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Lorem ipsum dolor sit amet.\n"},{"name":"tag","value":"p"}],"parent":"u1ef4cfd18","index":1},"ub2a940e22":{"id":"ub2a940e22","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n width: 50%;\n display: flex;\n flex-direction: column;\n gap: 20px\n}\n@media (--mobile) {\n %root% {\n width: 100%\n }\n}"}],"parent":"u9f1c27813","index":1},"ua63315ede":{"id":"ua63315ede","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n"},{"name":"tag","value":"p"}],"parent":"ub2a940e22","index":1},"ue46d96987":{"id":"ue46d96987","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"[ close ]"},{"name":"tag","value":"p"},{"name":"tagClass","value":["menu-pro-false-open","menu-pro-false-close"]}],"parent":"uee78f9caf","index":1},"ufe440bc2a":{"id":"ufe440bc2a","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n gap: 20px;\n flex-direction: row;\n align-items: center\n}"},{"name":"tagClass","value":["menu-pro-option","menu-pro-option:hover"]}],"parent":"u5c3bd09e5","index":2},"u1004bd3a7":{"id":"u1004bd3a7","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n gap: 20px;\n flex-direction: row;\n align-items: center\n}"},{"name":"tagClass","value":["menu-pro-option","menu-pro-option:hover"]}],"parent":"ue3eeac8c6","index":2},"u9d830e948":{"id":"u9d830e948","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n gap: 20px;\n flex-direction: row;\n align-items: center\n}"},{"name":"tagClass","value":["menu-pro-option","menu-pro-option:hover"]}],"parent":"u59541bbc1","index":2},"u1d18beb28":{"id":"u1d18beb28","name":"HtmlElement","label":"Paragraph","settings":[{"name":"content","value":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n"},{"name":"tag","value":"p"}],"parent":"ub2a940e22","index":2},"u233ca9c47":{"id":"u233ca9c47","name":"HtmlElement","label":"Link Simple","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n font-size: 16px;\n gap: 3px\n}\n@media (--tablet) {\n %root% {\n border-bottom: 1px solid;\n border-color: rgb(234, 234, 234)\n }\n}"},{"name":"tagClass","value":["menu-link-normal"]}],"parent":"u13be466cd","index":2},"u7dfbbb212":{"id":"u7dfbbb212","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n gap: 20px;\n flex-direction: row;\n align-items: center\n}"},{"name":"tagClass","value":["menu-pro-option","menu-pro-option:hover"]}],"parent":"u5c3bd09e5","index":3},"u050fdc059":{"id":"u050fdc059","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n gap: 20px;\n flex-direction: row;\n align-items: center\n}"},{"name":"tagClass","value":["menu-pro-option","menu-pro-option:hover"]}],"parent":"ue3eeac8c6","index":3},"u9bfee5688":{"id":"u9bfee5688","name":"HtmlElement","label":"Mega","settings":[{"name":"tag","value":"div"},{"name":"tagClass","value":["x-mega"]},{"name":"htmlAttribute","value":[{"name":"data-mega-open","value":"hover"},{"name":"data-mega-transition","value":"0.3s"},{"name":"data-mega-scroll","value":"always"},{"name":"data-mega-close-back","value":"true"}]},{"name":"css","value":"%root% {}\n@media (--tablet) {\n %root% {\n width: 100%\n }\n}"}],"parent":"u13be466cd","index":3},"ubf57695c6":{"id":"ubf57695c6","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n display: flex;\n gap: 20px;\n flex-direction: row;\n align-items: center\n}"},{"name":"tagClass","value":["menu-pro-option","menu-pro-option:hover"]}],"parent":"u59541bbc1","index":3},"u985634707":{"id":"u985634707","name":"HtmlElement","label":"Link Simple","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%root% {\n font-size: 16px;\n gap: 3px\n}\n@media (--tablet) {\n %root% {\n border-bottom: 1px solid;\n border-color: rgb(234, 234, 234)\n }\n}"},{"name":"tagClass","value":["menu-link-normal"]}],"parent":"u13be466cd","index":4}},"indexes":{"root":["u1a5cff07f"],"u1a5cff07f":["u6d44ee6c7"],"u84f5732e5":["u5c3bd09e5","ue3eeac8c6"],"u5c3bd09e5":["u9dc9448a0","u0fa0dd9ca","ufe440bc2a","u7dfbbb212"],"u0fa0dd9ca":["u605321e47","ud0a0917ea"],"ud0a0917ea":["ubc5164194","ua345359f6"],"ufe440bc2a":["u6ec34a678","udbe25096c"],"udbe25096c":["u82569c6ee","u6f3e366d1"],"u7dfbbb212":["u78b68ed4e","u546998a24"],"u546998a24":["ua36f551f6","u06b463e36"],"ue3eeac8c6":["u317a8ba84","u7439f94d5","u1004bd3a7","u050fdc059"],"u7439f94d5":["u74137862a","u683b78d02"],"u683b78d02":["ub86b9f488","u3553f3ca0"],"u1004bd3a7":["u9da17771e","u610b71d95"],"u610b71d95":["u0e9579e47","u095550cd9"],"u050fdc059":["uc6ee11956","u1ebc97bab"],"u1ebc97bab":["ucf72982e4","u13a66d84d"],"u97e29200c":["u15d4df920","u84f5732e5"],"u15d4df920":["ucccd014bd","u7cf32ef50"],"u843c11be2":["u89d0e873d","u97e29200c"],"u89d0e873d":["u14acc76e0","u3b1484d43"],"u9bfee5688":["u693a5593a","uf395122e0"],"u693a5593a":["ub4d4b68c2","u5042b11b5"],"uf395122e0":["u2439730fd","u9f1c27813"],"u2439730fd":["u47c1bd20d","u1847cef77"],"u9f1c27813":["u59541bbc1","ub2a940e22"],"u59541bbc1":["u79f7557f7","u3f45ac3fc","u9d830e948","ubf57695c6"],"u3f45ac3fc":["u2e1352d14","uef43f5fc2"],"uef43f5fc2":["u20321dc2c","uf7f3b6710"],"u9d830e948":["ua82d2584b","u7cff4892a"],"u7cff4892a":["u699b677a9","u78fa00db3"],"ubf57695c6":["u49661b1d9","u1ef4cfd18"],"u1ef4cfd18":["u8c9b71b61","u4f22cdba9"],"ub2a940e22":["ue26d903fc","ua63315ede","u1d18beb28"],"u13be466cd":["u8b72e660b","u843c11be2","u233ca9c47","u9bfee5688","u985634707"],"u8b72e660b":["u4a73f7b83"],"u233ca9c47":["u8355f7d43"],"u985634707":["u93526f10a"],"u4897827f1":["uee78f9caf","u13be466cd"],"uee78f9caf":["u462eac760","ue46d96987"],"u6d44ee6c7":["u64d1778d2","u4897827f1"]},"template":{"settings":{"dataVars":[{"a1":"graphQLQuery","b1":"wp","c1":"query {\n post {\n title: post_title\n content: post_content\n }\n}"}]},"technology":"html"},"version":{"builderius":"1.0.3-beta"},"source":"builderiusCopiedElements"}
/// Optional Plugin URL Download
https://drive.google.com/file/d/1aAUDkrNZqOnAFqzBr4hrla0WyZzY6l1H/view?usp=sharing
///////// JS
function isTouchDevice() {
return ("ontouchstart" in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
}
document.addEventListener("click", event => {
const openButton = event.target.closest(".x-mega-activate");
const closeButton = event.target.closest(".x-mega-close");
const mmDeactivateButton = event.target.closest(".x-mega-deactivate");
const xMega = event.target.closest(".x-mega");
const isReactEnv = typeof React !== 'undefined' && typeof React.createElement === 'function';
function getScopedElements(parentMega) {
return Array.from(parentMega.querySelectorAll("*")).filter(element => {
const closestMega = element.closest(".x-mega");
return !closestMega || closestMega === parentMega;
});
}
function closeAllXmegasExcept(parentMega) {
document.querySelectorAll(".x-mega").forEach(mega => {
if (mega !== parentMega && !mega.contains(parentMega)) {
const elements = getScopedElements(mega);
elements.forEach(element => {
Array.from(element.classList).forEach(cls => {
if (cls.endsWith("-open") && !cls.startsWith("ct-")) {
element.classList.add(cls.replace("-open", "-close"));
}
});
});
}
});
}
function closeChildXmegas(parentMega) {
parentMega.querySelectorAll(".x-mega").forEach(childMega => {
const elements = getScopedElements(childMega);
elements.forEach(element => {
Array.from(element.classList).forEach(cls => {
if (cls.endsWith("-open") && !cls.startsWith("ct-")) {
element.classList.add(cls.replace("-open", "-close"));
}
});
});
});
}
if (openButton) {
const parentMega = openButton.closest(".x-mega");
if (!parentMega) return;
let megaMode = parentMega.getAttribute("data-mega-open");
if (isTouchDevice() && megaMode === "hover") {
megaMode = "click";
}
if (megaMode === "click" || (megaMode === "hover" && isReactEnv)) {
event.preventDefault();
closeAllXmegasExcept(parentMega);
closeChildXmegas(parentMega);
const elements = getScopedElements(parentMega);
const isActive = elements.some(element =>
Array.from(element.classList).some(cls => cls.endsWith("-close"))
);
let scrollBehavior = parentMega.getAttribute("data-mega-scroll") || "never";
const isNested = !!(parentMega.parentElement && parentMega.parentElement.closest(".x-mega"));
if (isActive) {
elements.forEach(element => {
Array.from(element.classList).forEach(cls => {
if (cls.endsWith("-close")) {
element.classList.remove(cls);
}
});
});
if (!isNested) {
if (scrollBehavior === "always") {
document.body.style.overflow = "hidden";
} else if (scrollBehavior.endsWith("px")) {
let pxValue = parseInt(scrollBehavior.replace("px", ""));
if (window.innerWidth <= pxValue) {
document.body.style.overflow = "hidden";
}
}
}
} else {
elements.forEach(element => {
Array.from(element.classList).forEach(cls => {
if (cls.endsWith("-open") && !cls.startsWith("ct-")) {
element.classList.add(cls.replace("-open", "-close"));
}
});
});
if (!isNested) {
document.body.style.overflow = "";
}
}
}
}
if (closeButton) {
const parentMega = closeButton.closest(".x-mega");
if (!parentMega) return;
const elements = getScopedElements(parentMega);
elements.forEach(element => {
Array.from(element.classList).forEach(cls => {
if (cls.endsWith("-close")) {
element.classList.remove(cls);
}
});
});
let scrollBehavior = parentMega.getAttribute("data-mega-scroll") || "never";
const isNested = !!(parentMega.parentElement && parentMega.parentElement.closest(".x-mega"));
if (!isNested) {
if (scrollBehavior === "always") {
document.body.style.overflow = "";
} else if (scrollBehavior.endsWith("px")) {
let pxValue = parseInt(scrollBehavior.replace("px", ""));
if (window.innerWidth <= pxValue) {
document.body.style.overflow = "";
}
}
}
}
if (mmDeactivateButton) {
const parentMega = mmDeactivateButton.closest(".x-mega");
if (!parentMega) return;
const mmElements = getScopedElements(parentMega);
mmElements.forEach(mmElement => {
Array.from(mmElement.classList).forEach(mmCls => {
if (mmCls.endsWith("-open") && !mmCls.startsWith("ct-")) {
mmElement.classList.add(mmCls.replace("-open", "-close"));
}
});
});
let scrollBehavior = parentMega.getAttribute("data-mega-scroll") || "never";
const isNested = !!(parentMega.parentElement && parentMega.parentElement.closest(".x-mega"));
if (!isNested) {
if (scrollBehavior === "always") {
document.body.style.overflow = "";
} else if (scrollBehavior.endsWith("px")) {
let pxValue = parseInt(scrollBehavior.replace("px", ""));
if (window.innerWidth <= pxValue) {
document.body.style.overflow = "";
}
}
}
}
if (!isReactEnv && !xMega) {
document.querySelectorAll(".x-mega").forEach(mega => {
let closeBack = mega.getAttribute("data-mega-close-back") || "true";
if (closeBack === "true") {
const elements = getScopedElements(mega);
elements.forEach(element => {
Array.from(element.classList).forEach(cls => {
if (cls.endsWith("-open") && !cls.startsWith("ct-")) {
element.classList.add(cls.replace("-open", "-close"));
}
});
});
let scrollBehavior = mega.getAttribute("data-mega-scroll") || "never";
const isNested = !!(mega.parentElement && mega.parentElement.closest(".x-mega"));
if (!isNested) {
if (scrollBehavior === "always" || (scrollBehavior.endsWith("px") && window.innerWidth <= parseInt(scrollBehavior.replace("px", "")))) {
document.body.style.overflow = "";
}
}
}
});
}
if (xMega) {
const parentMegas = Array.from(xMega.closest(".x-mega") ? [xMega.closest(".x-mega")] : []);
parentMegas.forEach(parentMega => {
closeChildXmegas(parentMega);
});
}
});
function setupHoverOrClick() {
const isReactEnv = typeof React !== 'undefined' && typeof React.createElement === 'function';
const touchDevice = isTouchDevice();
document.querySelectorAll(".x-mega").forEach(mega => {
const megaMode = mega.getAttribute("data-mega-open");
let effectiveMegaMode = megaMode;
if (touchDevice && megaMode === "hover") {
effectiveMegaMode = "click";
}
if (effectiveMegaMode === "hover" && !isReactEnv) {
mega.addEventListener("mouseenter", () => {
const elements = Array.from(mega.querySelectorAll("*")).filter(element =>
!element.closest(".x-mega") || element.closest(".x-mega") === mega
);
elements.forEach(element => {
Array.from(element.classList).forEach(cls => {
if (cls.endsWith("-open") && !cls.startsWith("ct-")) {
element.classList.remove(cls.replace("-open", "-close"));
}
});
});
});
mega.addEventListener("mouseleave", () => {
const elements = Array.from(mega.querySelectorAll("*")).filter(element =>
!element.closest(".x-mega") || element.closest(".x-mega") === mega
);
elements.forEach(element => {
Array.from(element.classList).forEach(cls => {
if (cls.endsWith("-open") && !cls.startsWith("ct-")) {
element.classList.add(cls.replace("-open", "-close"));
}
});
});
closeChildXmegas(mega);
});
}
});
}
function closeChildXmegas(parentMega) {
parentMega.querySelectorAll(".x-mega").forEach(childMega => {
const elements = Array.from(childMega.querySelectorAll("*")).filter(element =>
!element.closest(".x-mega") || element.closest(".x-mega") === childMega
);
elements.forEach(element => {
Array.from(element.classList).forEach(cls => {
if (cls.endsWith("-open") && !cls.startsWith("ct-")) {
element.classList.add(cls.replace("-open", "-close"));
}
});
});
});
}
function applyMegaTransitions() {
document.querySelectorAll(".x-mega").forEach(mega => {
const transitionValue = mega.getAttribute("data-mega-transition") || "0s";
const elements = Array.from(mega.querySelectorAll("*")).filter(element =>
Array.from(element.classList).some(cls => cls.endsWith("-close"))
);
elements.forEach(element => {
element.style.transition = "0s";
requestAnimationFrame(() => {
element.style.transition = transitionValue;
});
});
});
}
setupHoverOrClick();
applyMegaTransitions();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment