Hallo,
weiß jemand wie ich diese Animation des Schliessen Buttons bekomme, sow wie auf dieser Webseite?
http://mmenu.frebsite.nl/
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!
Viele Grüße aus Köln
Matu
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
Geändert von Kim (03.02.2015 um 11:59 Uhr)
Da ich es gerade selber benötigt habe, hier mal mein Code.
Modul (Eigener HTML-Code):
Die Klasse offcanvas muss in dem "mmenu - Navigationsmenü" Modul als Klasse vergeben werden (siehe Anleitung).HTML-Code:<div class="offcanvas"><a href="#offcanvas"><span></span>Menü</a></div>
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;}
Geändert von Kim (08.06.2015 um 08:51 Uhr)
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
Lesezeichen