Beautiful animation for menu icon

February 16, 2016 10 Алиса Ставко

Very interesting effect for the menu icon. Initially, the menu icon has the classic view "burger", by clicking on the icon it transforms to the close icon use of animation effect "ninja". Repeated clicking the close icon is transformed into a menu icon.

Begin

Take a look to menu animation:

And the trajectory of the animation:

Liked? Then here's a link to the demo and for download of example.

How to use

Include JavaScript before the closing tag </head>: 

<head>
    <!-- ... -->
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="/pathToFolder/js/segment.min.js"></script>
    <script src="/pathToFolder/js/ease.min.js"></script>
    <!-- ... -->
</head>

Include JavaScript before the closing tag </body>: 

<body>
    <!--...-->
    <script src="js/main.js"></script>
</body>

Include CSS before the closing tag </head>: 

<head>
    <!-- ... -->
    <link rel="stylesheet" type="text/css" href="/pathToFolder/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="/pathToFolder/css/component.css" />
    <!-- ... -->
</head>

And add the menu code. Animated menu icon: 

<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: hidden">
    <svg width="1000px" height="1000px">
        <path id="pathA" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
        <path id="pathB" d="M 300 500 L 700 500"></path>
        <path id="pathC" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
    </svg>
    <button id="menu-icon-trigger" class="menu-icon-trigger"></button>
</div>

<div id="dummy" class="dummy">
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
</div>

Scaled menu: 

<div id="menu-icon-wrapper2" class="menu-icon-wrapper" style="visibility: hidden">
    <svg width="1000px" height="1000px">
        <path id="pathD" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
        <path id="pathE" d="M 300 500 L 700 500"></path>
        <path id="pathF" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
    </svg>
    <button id="menu-icon-trigger2" class="menu-icon-trigger"></button>
</div>

<div id="dummy2" class="dummy">
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
    <div class="dummy__item"></div>
</div>

Browser support

Chrome FireFox IE 9+ Safari Opera

Download

This project on Github: https://github.com/codrops/AnimatedMenuIcon.