Created
November 13, 2023 19:38
-
-
Save wpsoul/c8fc9b929e2a90a5863528d7b185a39b to your computer and use it in GitHub Desktop.
Double Slide menu in Wordpress Gutenberg greenshift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- wp:greenshift-blocks/iconbox {"id":"gsbp-de9cdb78-8092","inlineCssStyles":null,"interactionLayers":[{"triggerData":{"trigger":"click"},"actions":[{"actionname":"toggle-class","env":"no-action","classname":"active","selector":".menuslider"}],"env":"no-action"}],"containerLink":"#","iconBox_icon":{"icon":{"font":"rhicon rhi-bars","svg":"","image":""},"fill":"currentColor","fillhover":"","type":"font"},"linkTitle":"Menu trigger"} --> | |
| <div class="wp-block-greenshift-blocks-iconbox gspb_iconBox gspb_iconBox-id-gsbp-de9cdb78-8092" id="gspb_iconBox-id-gsbp-de9cdb78-8092"><a class="gspb-containerlink" href="#" title="Menu trigger" rel="noopener"><div class="gspb_iconBox__wrapper" style="display:inline-flex" data-gspbactions="[{"triggerData":{"trigger":"click"},"actions":[{"actionname":"toggle-class","env":"no-action","classname":"active","selector":".menuslider"}],"env":"no-action"}]"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 896 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M884 228h-872c-6.627 0-12-5.373-12-12v0-48c0-6.627 5.373-12 12-12v0h872c6.627 0 12 5.373 12 12v0 48c0 6.627-5.373 12-12 12v0zM884 548h-872c-6.627 0-12-5.373-12-12v0-48c0-6.627 5.373-12 12-12v0h872c6.627 0 12 5.373 12 12v0 48c0 6.627-5.373 12-12 12v0zM884 868h-872c-6.627 0-12-5.373-12-12v0-48c0-6.627 5.373-12 12-12v0h872c6.627 0 12 5.373 12 12v0 48c0 6.627-5.373 12-12 12v0z"></path></svg></div></a></div> | |
| <!-- /wp:greenshift-blocks/iconbox --> | |
| <!-- wp:greenshift-blocks/container {"id":"gsbp-94584091-3c61","inlineCssStyles":null,"dynamicGClasses":[{"value":"menuslider","type":"local","label":"menuslider","localed":false,"css":"body.gspb-bodyfront .menuslider{position:fixed!important;z-index:999;top:0px;right:0px;bottom:0px;left:0px;}body.gspb-bodyfront .menuslider{transition:all 0.5s cubic-bezier(0.165,0.84,0.44,1);pointer-events:none;}","attributes":{"responsive":{},"position":{"positionType":["fixed","","",""],"positions":{"values":{"top":["0px"],"bottom":["0px"],"left":["0px"],"right":["0px"]}},"Zindex":999},"front":"front","editor":"editor","":"","csstransform":{"pointerEvents":["none"],"time":0.5}},"originalID":"gsbp-94584091-3c61","originalBlock":"greenshift-blocks/container","selectors":[{"value":".active .menupanel","attributes":{"csstransform":{"translateY":["0px"],"time":0.5}},"css":"body.gspb-bodyfront .menuslider.active .menupanel{transition:all 0.5s cubic-bezier(0.165,0.84,0.44,1);transform: translateY(0px);}"},{"value":".active","attributes":{"csstransform":{"pointerEvents":["auto"],"time":0.5}},"css":"body.gspb-bodyfront .menuslider.active{transition:all 0.5s cubic-bezier(0.165,0.84,0.44,1);pointer-events:auto;}"},{"value":" .menutext","attributes":{"csstransform":{"translateY":["30px"],"time":0.5,"opacity":"0"}},"css":"body.gspb-bodyfront .menuslider .menutext{transition:all 0.5s cubic-bezier(0.165,0.84,0.44,1);transform: translateY(30px);opacity:0;}"},{"value":".active .menutext","attributes":{"csstransform":{"translateY":["0px"],"time":0.5,"opacity":"1","transitionDelay":0.8}},"css":"body.gspb-bodyfront .menuslider.active .menutext{transition:all 0.5s cubic-bezier(0.165,0.84,0.44,1);transform: translateY(0px);opacity:1;transition-delay:0.8s;}"},{"value":".active .closebutton","attributes":{"csstransform":{"transitionDelay":0.74,"translateY":[0],"time":0.5,"scale":["1"],"opacity":"1"}},"css":"body.gspb-bodyfront .menuslider.active .closebutton{transition:all 0.5s cubic-bezier(0.165,0.84,0.44,1);transform: translateY(0px) scale(1);opacity:1;transition-delay:0.74s;}"},{"value":" .closebutton","attributes":{"csstransform":{"scale":["0.01"],"time":0.5}},"css":"body.gspb-bodyfront .menuslider .closebutton{transition:all 0.5s cubic-bezier(0.165,0.84,0.44,1);transform: scale(0.01);}"},{"value":".active .menutext:nth-of-type(1)","attributes":{"csstransform":{"transitionDelay":0.3}},"css":"body.gspb-bodyfront .menuslider.active .menutext:nth-of-type(1){transition-delay:0.3s;}"},{"value":".active .menutext:nth-of-type(2)","attributes":{"csstransform":{"transitionDelay":0.4}},"css":"body.gspb-bodyfront .menuslider.active .menutext:nth-of-type(2){transition-delay:0.4s;}"},{"value":".active .menutext:nth-of-type(3)","attributes":{"csstransform":{"transitionDelay":0.5}},"css":"body.gspb-bodyfront .menuslider.active .menutext:nth-of-type(3){transition-delay:0.5s;}"},{"value":".active .menutext:nth-of-type(4)","attributes":{"csstransform":{"transitionDelay":0.6}},"css":"body.gspb-bodyfront .menuslider.active .menutext:nth-of-type(4){transition-delay:0.6s;}"},{"value":".active .menutext:nth-of-type(5)","attributes":{"csstransform":{"transitionDelay":0.7}},"css":"body.gspb-bodyfront .menuslider.active .menutext:nth-of-type(5){transition-delay:0.7s;}"}],"localedSpace":"front"}],"flexbox":{"type":"grid","enable":false,"gridcolumns":[2,null,null,1],"columngap":[null],"rowgap":[null]},"spacing":{"margin":{"values":{},"locked":false},"padding":{"values":{},"locked":false},"overflow":["hidden"]},"blockWidth":{"customWidth":{"value":[]},"customHeight":{"value":[]},"heightType":"custom","minHeight":["100vh"]},"displayStyles":false,"isVariation":"cssgrid","align":"full","className":"menuslider"} --> | |
| <div class="wp-block-greenshift-blocks-container alignfull gspb_container gspb_container-gsbp-94584091-3c61 menuslider" id="gspb_container-id-gsbp-94584091-3c61"><!-- wp:greenshift-blocks/container {"id":"gsbp-975da6aa-884a","inlineCssStyles":null,"dynamicGClasses":[{"value":"menupanel","type":"local","label":"menupanel","localed":false,"css":"","attributes":{},"originalID":"gsbp-975da6aa-884a","originalBlock":"greenshift-blocks/container","selectors":[]},{"value":"menupanel1","type":"local","label":"menupanel1","localed":false,"css":"body.gspb-bodyfront .menupanel1{transition:all 0.5s cubic-bezier(0.165,0.84,0.44,1);transform: translateY(-100%);}","attributes":{"csstransform":{"translateY":["-100%"],"time":0.5}},"originalID":"gsbp-975da6aa-884a","originalBlock":"greenshift-blocks/container","selectors":[],"localedSpace":"front"}],"flexbox":{"flexDirection":["column"],"type":"flexbox","justifyContent":["center"],"alignItems":["flex-end"]},"background":{"color":"#fd0000"},"spacing":{"margin":{"values":{},"locked":false},"padding":{"values":{"top":["50px"],"right":["50px"],"bottom":["50px"],"left":["50px"]},"locked":true}},"className":"menupanel menupanel1"} --> | |
| <div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-975da6aa-884a menupanel menupanel1" id="gspb_container-id-gsbp-975da6aa-884a"><!-- wp:greenshift-blocks/text {"id":"gsbp-aae2859a-c41c","inlineCssStyles":null,"dynamicGClasses":[{"value":"menutext","type":"local","label":"menutext","localed":false,"css":"","attributes":{},"originalID":"gsbp-aae2859a-c41c","originalBlock":"greenshift-blocks/text","selectors":[]}],"textContent":"\u003ca href=\u0022#\u0022\u003eHome\u003c/a\u003e","typography":{"textShadow":{},"useFluid":true,"fluidSizeMin":"3rem","fluidSizePerfect":"5vw","fluidSizeMax":"4.5rem","fluidLineMin":"4rem","fluidLinePerfect":"6vw","fluidLineMax":"5rem","fluidSizeCustomValue":["clamp(3rem, 5vw, 4.5rem)"],"fluidLineCustomValue":["clamp(4rem, 6vw, 5rem)"],"customweight":"bold","decoration":"remove","color":"#000000","colorlinks":"#000000"},"className":"menutext"} --> | |
| <div id="gspb_text-id-gsbp-aae2859a-c41c" class="gspb_text gspb_text-id-gsbp-aae2859a-c41c menutext"><a href="#">Home</a></div> | |
| <!-- /wp:greenshift-blocks/text --> | |
| <!-- wp:greenshift-blocks/text {"id":"gsbp-992a3753-5454","inlineCssStyles":null,"dynamicGClasses":[{"value":"menutext","type":"local","label":"menutext","localed":false,"css":"","attributes":{},"originalID":"gsbp-aae2859a-c41c","originalBlock":"greenshift-blocks/text","selectors":[]}],"textContent":"\u003ca href=\u0022#\u0022\u003ePortfolio\u003c/a\u003e","typography":{"textShadow":{},"useFluid":true,"fluidSizeMin":"3rem","fluidSizePerfect":"5vw","fluidSizeMax":"4.5rem","fluidLineMin":"4rem","fluidLinePerfect":"6vw","fluidLineMax":"5rem","fluidSizeCustomValue":["clamp(3rem, 5vw, 4.5rem)"],"fluidLineCustomValue":["clamp(4rem, 6vw, 5rem)"],"customweight":"bold","decoration":"remove","color":"#000000","colorlinks":"#000000"},"className":"menutext"} --> | |
| <div id="gspb_text-id-gsbp-992a3753-5454" class="gspb_text gspb_text-id-gsbp-992a3753-5454 menutext"><a href="#">Portfolio</a></div> | |
| <!-- /wp:greenshift-blocks/text --> | |
| <!-- wp:greenshift-blocks/text {"id":"gsbp-1470feb1-a317","inlineCssStyles":null,"dynamicGClasses":[{"value":"menutext","type":"local","label":"menutext","localed":false,"css":"","attributes":{},"originalID":"gsbp-aae2859a-c41c","originalBlock":"greenshift-blocks/text","selectors":[]}],"textContent":"\u003ca href=\u0022#\u0022\u003eContact\u003c/a\u003e","typography":{"textShadow":{},"useFluid":true,"fluidSizeMin":"3rem","fluidSizePerfect":"5vw","fluidSizeMax":"4.5rem","fluidLineMin":"4rem","fluidLinePerfect":"6vw","fluidLineMax":"5rem","fluidSizeCustomValue":["clamp(3rem, 5vw, 4.5rem)"],"fluidLineCustomValue":["clamp(4rem, 6vw, 5rem)"],"customweight":"bold","decoration":"remove","color":"#000000","colorlinks":"#000000"},"className":"menutext"} --> | |
| <div id="gspb_text-id-gsbp-1470feb1-a317" class="gspb_text gspb_text-id-gsbp-1470feb1-a317 menutext"><a href="#">Contact</a></div> | |
| <!-- /wp:greenshift-blocks/text --> | |
| <!-- wp:greenshift-blocks/text {"id":"gsbp-b4d64e4d-f7e9","inlineCssStyles":null,"dynamicGClasses":[{"value":"menutext","type":"local","label":"menutext","localed":false,"css":"","attributes":{},"originalID":"gsbp-aae2859a-c41c","originalBlock":"greenshift-blocks/text","selectors":[]}],"textContent":"\u003ca href=\u0022#\u0022\u003ePrices\u003c/a\u003e","typography":{"textShadow":{},"useFluid":true,"fluidSizeMin":"3rem","fluidSizePerfect":"5vw","fluidSizeMax":"4.5rem","fluidLineMin":"4rem","fluidLinePerfect":"6vw","fluidLineMax":"5rem","fluidSizeCustomValue":["clamp(3rem, 5vw, 4.5rem)"],"fluidLineCustomValue":["clamp(4rem, 6vw, 5rem)"],"customweight":"bold","decoration":"remove","color":"#000000","colorlinks":"#000000"},"className":"menutext"} --> | |
| <div id="gspb_text-id-gsbp-b4d64e4d-f7e9" class="gspb_text gspb_text-id-gsbp-b4d64e4d-f7e9 menutext"><a href="#">Prices</a></div> | |
| <!-- /wp:greenshift-blocks/text --> | |
| <!-- wp:greenshift-blocks/text {"id":"gsbp-26277451-e197","inlineCssStyles":null,"dynamicGClasses":[{"value":"menutext","type":"local","label":"menutext","localed":false,"css":"","attributes":{},"originalID":"gsbp-aae2859a-c41c","originalBlock":"greenshift-blocks/text","selectors":[]}],"textContent":"\u003ca href=\u0022#\u0022\u003eNews\u003c/a\u003e","typography":{"textShadow":{},"useFluid":true,"fluidSizeMin":"3rem","fluidSizePerfect":"5vw","fluidSizeMax":"4.5rem","fluidLineMin":"4rem","fluidLinePerfect":"6vw","fluidLineMax":"5rem","fluidSizeCustomValue":["clamp(3rem, 5vw, 4.5rem)"],"fluidLineCustomValue":["clamp(4rem, 6vw, 5rem)"],"customweight":"bold","decoration":"remove","color":"#000000","colorlinks":"#000000"},"className":"menutext"} --> | |
| <div id="gspb_text-id-gsbp-26277451-e197" class="gspb_text gspb_text-id-gsbp-26277451-e197 menutext"><a href="#">News</a></div> | |
| <!-- /wp:greenshift-blocks/text --> | |
| <!-- wp:greenshift-blocks/iconbox {"id":"gsbp-41611919-68d4","inlineCssStyles":null,"dynamicGClasses":[{"value":"closebutton","type":"local","label":"closebutton","localed":false,"css":"","attributes":{},"originalID":"gsbp-41611919-68d4","originalBlock":"greenshift-blocks/iconbox","selectors":[]}],"interactionLayers":[{"triggerData":{"trigger":"click"},"actions":[{"actionname":"remove-class","env":"no-action","classname":"active","selector":".menuslider"}],"env":"no-action"}],"containerLink":"#","iconBox_icon":{"icon":{"font":"rhicon rhi-times-circle","svg":"","image":""},"fill":"#ffffff","fillhover":"","type":"font","iconSize":["40px"],"iconSizeY":["40px"]},"position":{"positionType":["absolute","","",""],"positions":{"values":{"top":["60px"],"left":["71px"],"bottom":[null],"right":[null]}}},"linkTitle":"Close menu","className":"closebutton"} --> | |
| <div class="wp-block-greenshift-blocks-iconbox gspb_iconBox gspb_iconBox-id-gsbp-41611919-68d4 closebutton" id="gspb_iconBox-id-gsbp-41611919-68d4"><a class="gspb-containerlink" href="#" title="Close menu" rel="noopener"><div class="gspb_iconBox__wrapper" style="display:inline-flex" data-gspbactions="[{"triggerData":{"trigger":"click"},"actions":[{"actionname":"remove-class","env":"no-action","classname":"active","selector":".menuslider"}],"env":"no-action"}]"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M512 16c-274 0-496 222-496 496s222 496 496 496 496-222 496-496-222-496-496-496zM512 944c-237.4 0-432-192.2-432-432 0-237.4 192.2-432 432-432 237.4 0 432 192.2 432 432 0 237.4-192.2 432-432 432zM701.6 373.4l-138.6 138.6 138.6 138.6c9.4 9.4 9.4 24.6 0 34l-17 17c-9.4 9.4-24.6 9.4-34 0l-138.6-138.6-138.6 138.6c-9.4 9.4-24.6 9.4-34 0l-17-17c-9.4-9.4-9.4-24.6 0-34l138.6-138.6-138.6-138.6c-9.4-9.4-9.4-24.6 0-34l17-17c9.4-9.4 24.6-9.4 34 0l138.6 138.6 138.6-138.6c9.4-9.4 24.6-9.4 34 0l17 17c9.2 9.4 9.2 24.6 0 34z"></path></svg></div></a></div> | |
| <!-- /wp:greenshift-blocks/iconbox --></div> | |
| <!-- /wp:greenshift-blocks/container --> | |
| <!-- wp:greenshift-blocks/container {"id":"gsbp-0f4d8ab5-99ba","inlineCssStyles":null,"dynamicGClasses":[{"value":"menupanel","type":"local","label":"menupanel","localed":false,"css":"","attributes":{},"originalID":"gsbp-0f4d8ab5-99ba","originalBlock":"greenshift-blocks/container","selectors":[]},{"value":"menupanel2","type":"local","label":"menupanel2","localed":false,"css":"body.gspb-bodyfront .menupanel2{transition:all 0.5s cubic-bezier(0.165,0.84,0.44,1);transform: translateY(100%);}","attributes":{"csstransform":{"translateY":["100%"],"time":0.5}},"originalID":"gsbp-0f4d8ab5-99ba","originalBlock":"greenshift-blocks/container","selectors":[],"localedSpace":"front"}],"background":{"color":"#000000","image":["http://wp-test.local/wp-content/uploads/2023/10/atomicdeviant_swirling_topographic_minimal_outlines_paint_outli_f4830a78-855d-4a08-9a8b-dd730c8ada1a.png"],"size":["contain"],"repeat":["no-repeat"],"positionImage":[{"x":1,"y":0.5}]},"className":"menupanel menupanel2"} --> | |
| <div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-0f4d8ab5-99ba menupanel menupanel2" id="gspb_container-id-gsbp-0f4d8ab5-99ba"><!-- wp:spacer --> | |
| <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div> | |
| <!-- /wp:spacer --></div> | |
| <!-- /wp:greenshift-blocks/container --></div> | |
| <!-- /wp:greenshift-blocks/container --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment