Today we’d like to share a simple idea for navigation slide out effect with you and some ideas for navigation items and close button animations. The inspiration for this effects and layout comes from Zhenya Rynzhuk’s Dribbble shot (link at bottom of page in References and Credits section). The animations are we always powered by TweenMax.
Attention: We are using some modern CSS techniques and properties for the demos so please view them in a modern browser.
HTML Structure is simple, too. We have two parts of slide out navigation. First, that contains a trigger for opening navigation and second, that contains our navigation items and trigger for closing navigation.
<!-- COIDEA:demo::left-column:header:open-nav START --> <div class="coidea-navigation-main"> <span>Menu</span> </div> <!-- COIDEA:demo::left-column:header:open-nav END --> <!-- COIDEA:demo:navigation-details START --> <div class="coidea-navigation-details-holder"> <div class="coidea-close"> <span></span> <span></span> </div> <div class="coidea-headline"> <h2>Navigation headline</h2> </div> <div class="coidea-navigation-content"> <div class="coidea-navigation-details"> <ul> <li><a href="#" class="active">First</a></li> <li><a href="#">Second...</a></li> </ul> </div> </div> </div> <!-- COIDEA:demo:navigation-details END -->
I hope you enjoyed this challenge and find it useful and inspiring!