Social Media Links
I wanted to create a fixed menu to show my social media links. I found a Folding Menu by Animated Creativity that I decided to use as a template for my Social Media links.
While implementing it was fairly simple, it was not responsive, and I had to learn the code to ensure I could edit it without breaking it. This animation is done through CSS animation activated by hovering the pointer over the “FOLLOW ME” text and through some clever transition-delays. I edited the positions but left the animation itself largely alone as it was exactly what I wanted.
Main Menu
For the main menu, I wasn’t sure what I wanted. I wanted a similar line based menu animation but a simple hover effect was boring. The original menu looked like the image above. There were no colour animations (menaing the active menu just stayed blue) and the hover effect simply duplicated the blue colour gradient to the other menu items.
This is the first time I tried animating with the hover effect, so I used the code in the pen Magic Line Navbar by seto89 to figure out the timing and syntax needed. I also added some text and a photo to make it look like an about page to make sure the spacing looked right. I just duplicated the about page so what we could see the menu difference when it was active on other pages.
I decided to code my style first and then add this animation to my menu. I only added the line animation from the pen as I couldn’t figure out how to recreate it myself. I also believe it will break in any browser other than Chrome. From this point I decided I needed to animate the colour to replicate the background colours and got it to work. I also tried to get the animated to line to be on the top and bottom, but I can either get to work on top or on the bottom. From this point all I had to do was make the menu responsive. This was tricky as the animation tended to stop working if you fiddle with it. In the end I left it at the bottom as it still looked cool and I feel like it will break I fiddle too much with it. My goal for the end of the year is to have this animation working on all browsers on the top and the bottom the menu.
To download the file, click here.
References
Animated
Creativity, na. CSS – Folding menu | Codepen. [Online]
Available at: https://codepen.io/animatedcreativity/pen/wOqBQr
[Accessed 21 10 2019].
seto89, na. Pure CSS Magic Line Navbar | Codepen. [Online]
Available at: https://codepen.io/seto89/pen/WmGwwp
[Accessed 21 10 2019].