dk_mmenu - Menü schliessen Animation

[gregl]

Hallo,

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

http://mmenu.frebsite.nl/

[matuweb]

Dies würde mich auch sehr interessieren!

[Kim]

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

[Kim]

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

Modul (Eigener 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:

#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;}