Today I want to share with you one interesting and creative idea for creating navigation in print media style. I wanted to make an example that you can use as primary navigation, but also as navigation for just one section on a page like "our team" or "latest works" as well.
Attention: Note that we use modern CSS properties like a "viewport width or height" and "calc" property in this demo.
As the main power for our animations, I used the most popular GreenSock's tool, TweenMax, and I made styles for our demo with CSS preprocessor - SCSS which you can find in project files, too, after downloading the project. Triggers for our animations are hamburger icon in the right top of the viewport and navigation items as well.
And that’s it! I hope you enjoyed this navigation demo and find it useful and make sure to check out the other demos.