main3.js
1.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/**
* main3.js
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2014, Codrops
* http://www.codrops.com
*/
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content-wrap' ),
openbtn = document.getElementById( 'open-button' ),
closebtn = document.getElementById( 'close-button' ),
isOpen = false,
morphEl = document.getElementById( 'morph-shape' ),
s = Snap( morphEl.querySelector( 'svg' ) );
path = s.select( 'path' );
initialPath = this.path.attr('d'),
pathOpen = morphEl.getAttribute( 'data-morph-open' ),
isAnimating = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target it´s not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== openbtn ) {
toggleMenu();
}
} );
}
function toggleMenu() {
if( isAnimating ) return false;
isAnimating = true;
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
// animate path
setTimeout( function() {
// reset path
path.attr( 'd', initialPath );
isAnimating = false;
}, 300 );
}
else {
classie.add( bodyEl, 'show-menu' );
// animate path
path.animate( { 'path' : pathOpen }, 400, mina.easeinout, function() { isAnimating = false; } );
}
isOpen = !isOpen;
}
init();
})();