Day # 23: Rotating Menu
Menus are an essential feature of any website. As frontend developers, we need to master how to handle different menus, especially if our client asks for an innovative one.
That being said, I recently came across a rotating menu that I found particularly creative, so I decided to create a version of it. This functionality is fairly easy to develop, we just need to handle the placement of the icons, by setting its position to “absolute”, in reference to its parent element, which we need to set to “relative”.
To hide and then display the menu, we just need to set the transform property of the parent element to “scale(3)”. In other words, just by making it larger and then by bringing it back to its original size, we will be able to show or hide its content.
Lastly, to make both the central icon, we just need to set its transform property to rotate(45deg), and then bring it back to its original rotate(0deg).
Comments
Post a Comment