WebDev For You - Daily Interaction #119

Welcome to Daily Interaction #119. This demo showcases a menu item animation on hover. With this demo two vertical lines appear on the left and right of the menu item, and afterwards two horizontal lines appear on the top and bottom of the menu item on hover. The left and right sides scale in from the center and the top and bottom lines scale in from the left. There is a slight delay to the top and bottom lines to add a bit more style to the animation. The 4 lines around the menu item are div block that are absolutely position and placed on each side of the menu item. All of the div blocks have a width or height of 2px depending on whether the line is vertical or horizontal. The scaling animations were applied via interactions. Inspired by 'Caliban' menu here: https://tympanus.net/Development/LineMenuStyles/ To view more daily interactions and premium content visit: https://www.webdevforyou.com/