WebDev For You - Daily Interaction #107
![site profile thumbnail](https://uploads-ssl.webflow.com/5cb607c042f07a7d8b00cdad/5cb61d2fe98416dd54ed5971_webdev-for-you-cloneable-cover-107.png)
Welcome to Daily Interaction #107!
This demo showcases a menu that comes out of the menu trigger. When the menu trigger is clicked a set of menu items reveal. This was accomplished by placing the menu wrapper inside of another wrapper with an overflow of hidden. The menu wrapper had a position of absolute so as not to move when the overflow wrapper got larger. Then in the interaction I set the width of the overflow wrapper to 0% initially and then when you click the menu trigger the overflow wrapper becomes 100% width revealing the menu wrapper and the menu items inside of it. I also applied a simple hover effect to the menu items when the menu opens, and the menu trigger turns into an x on click and back to a 3 line menu trigger on second click.
Inspired by: https://codepen.io/speresunko/pen/JvbgWW
https://www.webdevforyou.com/
If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!