WebDev For You - Daily Interaction #90

Welcome to daily interaction #90. Ending the week off with a nice and simple menu item animation on hover. With this animation blocks with a border appear when the user hovers. I can see this making a nice interaction for businesses to represent buildings. You could even change the height of each block to make certain blocks taller than others! That could be interesting. The animation was created by setting an overflow of hidden to the main menu wrapper and than having individual blocks move up and down. For the desktop version only a border was added to the left, top, and right of the block. For the mobile version of the menu the block comes in from the left to the right so a border was applied to the top, right, and bottom of the block. The desktop and mobile menu have their own menu and interactions. This demo was inspired by the menus in this Codrops demo: https://tympanus.net/Development/LineMenuStyles/