https://webdev-for-you-daily-interaction-9.webflow.io/

1<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com --><!-- Last Published: Sun Aug 07 2022 15:24:42 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="webdev-for-you-daily-interaction-9.webflow.io" data-wf-page="5b5509984486f8345a8c9138" data-wf-site="5b5509984486f80e508c9139"><head><meta charset="utf-8"/><title>Daily Interaction #9 | WebDev For You | Made in Webflow</title><meta content="This demo showcases an off-canvas menu in Webflow." name="description"/><meta content="Daily Interaction #9 | WebDev For You | Made in Webflow" property="og:title"/><meta content="This demo showcases an off-canvas menu in Webflow." property="og:description"/><meta content="Daily Interaction #9 | WebDev For You | Made in Webflow" property="twitter:title"/><meta content="This demo showcases an off-canvas menu in Webflow." property="twitter:description"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="Webflow" name="generator"/><link href="https://assets.website-files.com/5b5509984486f80e508c9139/css/webdev-for-you-daily-interaction-9.webflow.144f20f1e.css" rel="stylesheet" type="text/css"/>

1<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>

1<script type="text/javascript">WebFont.load({  google: {    families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","IBM Plex Sans:regular,500,600,700","Caveat:regular"]  }});</script>

1<!--[if lt IE 9]>

1<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>

1<![endif]-->

1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>

1<link href="https://assets.website-files.com/5b5509984486f80e508c9139/5b5509984486f86fc58c9155_webflow-for-you-mark-32x32.png" rel="shortcut icon" type="image/x-icon"/><link href="https://assets.website-files.com/5b5509984486f80e508c9139/5bac4b0cbae3d01ed10284a3_webdev-for-you-mark-256x256.png" rel="apple-touch-icon"/><style>body,button,input,select,textarea{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{overflow-x:hidden}.demo-btn{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0)}</style></head><body><div class="d-9-menu-wrapper"><a href="#" class="d-9-link-block w-inline-block"><div class="d-9-menu-item">Home</div></a><a href="#" class="d-9-link-block w-inline-block"><div class="d-9-menu-item">About</div></a><a href="#" class="d-9-link-block w-inline-block"><div class="d-9-menu-item">Services</div></a><a href="#" class="d-9-link-block w-inline-block"><div class="d-9-menu-item">Contact</div></a><a href="#" class="d-9-link-block w-inline-block"><div class="d-9-menu-item">Shop</div></a></div><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48914" class="d-9-section-home wf-section"><div class="demo-container"><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48916" style="-webkit-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);opacity:0" class="demo-banner-top"><a data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48917" style="opacity:0;-webkit-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" href="https://www.webdevforyou.com/" class="demo-mark-logo-wrapper w-inline-block"><img src="https://assets.website-files.com/5c47738ef9bd7d1127e3cca5/5c47738ef9bd7df2b4e3cccd_Logo.svg" alt="" class="demo-mark-2"/><img src="https://assets.website-files.com/5c47738ef9bd7d1127e3cca5/5c47738ef9bd7de94ee3ccac_webdev-for-you-logomark.svg" width="130" data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48919" style="opacity:0" id="w-node-aed26b7d-911b-241f-1b4c-cf7952f48919-5a8c9138" alt="" class="demo-logo-mark-2"/></a><h3 data-w-id="aed26b7d-911b-241f-1b4c-cf7952f4891a" style="opacity:0;-webkit-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, -100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-heading h3">#09 : Off-Canvas Menu on Click</h3></div><div class="content-wrapper"><div class="demo-main-text-wrapper"><h2 class="demo-heading h2">Off-Canvas Menu on Click</h2><h1 class="demo-heading h1">Welcome to<br/>Daily Interaction 9</h1><div class="separator"></div><p class="demo-p main">This example showcases an off-canvas menu that appears when you click on the menu trigger.</p></div><div class="demo-wrapper"><div class="instructions-wrapper"><p class="demo-p arrow">do the honers,<br/>click on the menu trigger!</p><img src="https://assets.website-files.com/5c345004f07efebe2593a215/5c3dc840fa928d0e6c194746_arrow.svg" width="35" alt="" class="image-2"/></div><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f4892e" class="d-9-menu-trigger"><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f4892f" style="-webkit-transform:translate3d(0, -15PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, -15PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, -15PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, -15PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="d-9-menu-line"></div><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48930" class="d-9-menu-line"></div><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48931" style="-webkit-transform:translate3d(0, 15PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 15PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 15PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 15PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="d-9-menu-line"></div></div></div></div><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48932" style="-webkit-transform:translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 100%, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-banner-bottom"><div class="demo-banner-bottom-wrapper"><div class="demo-text-wrapper"><p class="demo-p bottom">Visual Web Development Made Easy.</p></div><div class="demo-btn-wrapper"><a href="https://webflow.grsm.io/webdev-for-you-templates" data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48938" target="_blank" class="demo-btn f-1 w-inline-block"><div class="demo-btn-text f-1">Templates</div><div style="-webkit-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-btn-wrapper-block"></div></a><a href="https://www.youtube.com/c/webdevforyou" data-w-id="aed26b7d-911b-241f-1b4c-cf7952f4893c" target="_blank" class="demo-btn f-2 w-inline-block"><div class="demo-btn-text f-1">Tutorials</div><div class="demo-btn-wrapper-block f-2"></div></a><a href="https://webflow.grsm.io/interaction?interaction=WebDev-For-You-Daily-Interaction-9" data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48944" target="_blank" class="demo-btn f-2 w-inline-block"><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48945" class="demo-btn-text f-1">Clone</div><div class="demo-btn-wrapper-block f-2"></div></a><a href="https://bit.ly/learn-ui-design-course" data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48940" target="_blank" class="demo-btn f-2 w-inline-block"><div class="demo-btn-text f-1">Learn UI Design</div><div class="demo-btn-wrapper-block f-2"></div></a><a href="https://webflow.grsm.io/1655335" data-w-id="4afa3fad-92d9-ea83-1fcb-61df53abd8f1" target="_blank" class="demo-btn f-2 w-inline-block"><div class="demo-btn-text f-1">Get Webflow</div><div class="demo-btn-wrapper-block f-2"></div></a></div></div><div class="demo-close-div"><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48949" class="d-50-circle-wrapper-2"><div class="close-line"></div><div class="close-line rotate"></div></div></div></div><div class="demo-left-arrow-wrapper"><a data-w-id="aed26b7d-911b-241f-1b4c-cf7952f4894d" href="https://webdev-for-you-daily-interaction-8.webflow.io/" class="demo-arrow-wrapper w-inline-block"><img src="https://assets.website-files.com/5c47738ef9bd7d1127e3cca5/5c47738ef9bd7d25d5e3ccb1_Left-arrow.svg" width="20" alt="" class="image-3"/><div style="opacity:0;

1-webkit-transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-arrow-text">Prev</div></a></div><div class="demo-right-arrow-wrapper"><a data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48952" href="https://webdev-for-you-daily-interaction-10.webflow.io/" class="demo-arrow-wrapper w-inline-block"><div style="opacity:0;-webkit-transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 20PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-arrow-text">Next</div><img src="https://assets.website-files.com/5c47738ef9bd7d1127e3cca5/5c47738ef9bd7dd635e3ccbb_Right-arrow.svg" width="20" alt="" class="image-3"/></a></div><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48956" style="opacity:0;-webkit-transform:translate3d(0, 250PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 250PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 250PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 250PX, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-bottom-buttons"><a href="https://webflow.grsm.io/1655335" data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48957" target="_blank" class="demo-btn f-2 bottom-btn w-inline-block"><div class="demo-btn-text f-1">Get Webflow</div><div class="demo-btn-wrapper-block f-2"></div></a><a href="https://webflow.grsm.io/webdev-for-you-templates" data-w-id="aed26b7d-911b-241f-1b4c-cf7952f4895b" target="_blank" class="demo-btn f-2 bottom-btn w-inline-block"><div class="demo-btn-text f-1">Webflow Templates</div><div class="demo-btn-wrapper-block f-2"></div></a><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f4895f" class="demo-btn-close-wrapper"><div class="demo-btn-close-inner-wrapper"><div class="demo-btn-close-arrow"></div></div></div></div></div><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48962" style="-webkit-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="clone-instructions-panel"><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48963" style="opacity:0;height:0VH" class="inner-wrapper"><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48964" style="opacity:0" class="panel-text-wrapper"><h1 class="demo-heading h1 popup">Cloning Instructions </h1><h2 class="demo-heading h2 popup">To copy this project into your own project simply click on the &#x27;clone&#x27; button below.</h2><div class="separator popup"></div><p class="demo-p main popup">After the project is cloned you can copy the &#x27;d-8-image-wrapper&#x27; to use the &#x27;flexbox image&#x27; animation. The animations are copied into the Webflow &#x27;Interactions&#x27; panel. To remove the &#x27;cloning instructions panel&#x27; select the &#x27;Clone Instructions Panel&#x27; in the navigator panel and change the display setting to &#x27;None.&#x27;</p><div class="panel-button-wrapper"><a href="https://webflow.com/website/WebDev-For-You-Daily-Interaction-9?rfsn=1655335.42f776" data-w-id="aed26b7d-911b-241f-1b4c-cf7952f4896d" target="_blank" class="demo-btn f-1 w-inline-block"><div class="demo-btn-text f-1">Clone</div><div style="-webkit-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-100%, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="demo-btn-wrapper-block"></div></a></div></div><div data-w-id="aed26b7d-911b-241f-1b4c-cf7952f48971" style="opacity:0;-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(45DEG) skew(0, 0);-moz-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(45DEG) skew(0, 0);-ms-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(45DEG) skew(0, 0);transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(45DEG) skew(0, 0)" class="demo-close-div popup"><div class="close-line popup"></div><div class="close-line rotate popup"></div></div></div></div></div>

1<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5b5509984486f80e508c9139" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

1<script src="https://assets.website-files.com/5b5509984486f80e508c9139/js/webflow.411463c90.js" type="text/javascript"></script>

1<!--[if lte IE 9]>

1<script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>

1<![endif]-->

1<script type="text/javascript" src="https://transactions.sendowl.com/assets/sendowl.js" ></script>

1</body></html>