dk_mmenu - Menü schliessen Animation

Hallo,

weiß jemand wie ich diese Animation des Schliessen Buttons bekomme, sow wie auf dieser Webseite?

http://mmenu.frebsite.nl/

Dies würde mich auch sehr interessieren!

Wenn die Navigation geöffnet ist bekommt html die Klasse mm-opened.
Der Rest ist CSS und JS!

Animation mit CSS und Snap:
http://tympanus.net/Development/AnimatedSVGIcons/
https://github.com/codrops/AnimatedSVGIcons

Animation nur mit CSS:
http://sarasoueidan.com/blog/navicon-transformicons/
http://codepen.io/anon/pen/HeKxE

Da ich es gerade selber benötigt habe, hier mal mein Code.

Modul (Eigener HTML-Code):

HTML-Code:

---

<div class="offcanvas"><a href="#offcanvas"><span></span>Menü</a></div>

---

Die Klasse offcanvas muss in dem "mmenu - Navigationsmenü" Modul als Klasse vergeben werden (siehe Anleitung).

CSS Code Klassen müssen ggf. angepasst werden:

Code:

---

#header .inside .offcanvas {
        float: left;
        width: 100px; height: 30px; padding: 20px 0;
        cursor: pointer;}

#header .inside .offcanvas a {
        outline: 0;
        cursor: pointer;
        color: #fff; line-height: 28px;
        padding-left: 35px;
        text-transform: uppercase;
        text-align: center; letter-spacing: 0.04em;}

#header .inside .offcanvas a span {margin-top: 12px}

#header .inside .offcanvas a span,
#header .inside .offcanvas a span:before,
#header .inside .offcanvas a span:after {
        display: block;
        position: absolute;
        width: 24px; height: 3px;
        background: #fff;
        content: '';}

#header .inside .offcanvas a span:before {top: -8px;}
#header .inside .offcanvas a span:after {bottom: -8px;}

#header .inside .offcanvas a span,
#header .inside .offcanvas a span:before,
#header .inside .offcanvas a span:after {transition: all 500ms ease-in-out;}

.mm-opened #header .inside .offcanvas a span {background-color: transparent;}

.mm-opened #header .inside .offcanvas a span:before,
.mm-opened #header .inside .offcanvas a span:after {top: 0;}

.mm-opened #header .inside .offcanvas a span:before {transform: rotate(45deg);}
.mm-opened #header .inside .offcanvas a span:after {transform: translateY(-8px) rotate(-45deg);top: 8px;}

---