WebDev For You - Daily Interaction #107

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!