در این نمونه یک منو باز شونده در اختیار شما قرار گرفته است که با کلیک بر روی آن باز و با کلیک مجدد بسته خواهد شد.
کدهای HTML :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div class=“content”>
<nav id=“menu” class=“menu”>
<div class=“morph-shape” data-morph-open=“M260,500H0c0,0,8-120,8-250C8,110,0,0,0,0h260c0,0-8,110-8,250C252,380,260,500,260,500z”>
<svg width=“100%” height=“100%” viewBox=“0 0 260 500” preserveAspectRatio=“none”>
<path fill=“none” d=“M260,500H0c0,0,0-120,0-250C0,110,0,0,0,0h260c0,0,0,110,0,250C260,380,260,500,260,500z”/>
</svg>
</div>
<button class=“menu__label”><i class=“fa fa-fw fa-bars”></i><span>Open Menu</span></button>
<ul class=“menu__inner”>
<li><a href=“#”><span>Reading List</span></a></li>
<li><a href=“#”><span>Saved Items</span></a></li>
<li><a href=“#”><span>All Media</span></a></li>
<li><a href=“#”><span>Favorites</span></a></li>
<li><a href=“#”><span>Messages</span></a></li>
<li><a href=“#”><span>Notifications</span></a></li>
</ul>
</nav>
</div>
|
در این مطلب از snap.svg-min.js و classie.js استفاده شده است.
کدهای CSS :
|
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
.menu {
width: 300px;
height: 70px;
margin: 2em auto;
position: relative;
text-align: left;
cursor: pointer;
z-index: 100;
}
.menu__label {
display: block;
background: none;
border: none;
width: 100%;
height: 70px;
padding: 0 1.25em;
font-size: 1.3em;
color: #fff;
position: relative;
outline: none;
text-align: left;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
.menu__inner li a span,
.menu__label span {
font-size: 0.68em;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.2;
font-weight: 600;
}
.menu .fa {
vertical-align: top;
line-height: 1.25;
margin-right: 0.65em;
font-size: 1.15em;
}
.menu__inner {
list-style: none;
padding: 0 1.25em;
font-size: 1.3em;
margin: 0;
margin-left: 50px;
position: absolute;
overflow: hidden;
height: 0;
-webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
.menu.menu–open .menu__inner {
height: 310px;
}
.menu__inner li a {
display: block;
padding: 0.53em 0;
line-height: 1.2;
opacity: 0;
color: #727476;
pointer-events: none;
outline: none;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.menu__inner li a:hover {
color: #45484A;
}
.menu–open .menu__inner li a {
opacity: 1;
pointer-events: auto;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.menu–open .menu__inner li:nth-child(2) a {
-webkit-transition-delay: 0.04s;
transition-delay: 0.04s;
}
.menu–open .menu__inner li:nth-child(3) a {
-webkit-transition-delay: 0.08s;
transition-delay: 0.08s;
}
.menu–open .menu__inner li:nth-child(4) a {
-webkit-transition-delay: 0.12s;
transition-delay: 0.12s;
}
.menu–open .menu__inner li:nth-child(5) a {
-webkit-transition-delay: 0.16s;
transition-delay: 0.16s;
}
.menu–open .menu__inner li:nth-child(6) a {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.morph-shape,
.morph-shape svg {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.morph-shape {
height: 70px;
-webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
.morph-shape svg {
height: 100%;
}
.menu.menu–open .morph-shape {
height: 400px;
}
.morph-shape svg path {
fill: #C6CFCF;
}
|
کدهای Javascript :
|
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
|
(function() {
functionSVGDDMenu( el, options ) {
this.el = el;
this.init();
}
SVGDDMenu.prototype.init = function() {
this.shapeEl = this.el.querySelector( ‘div.morph-shape’ );
vars= Snap( this.shapeEl.querySelector( ‘svg’ ) );
this.pathEl = s.select( ‘path’ );
this.paths = {
reset: this.pathEl.attr( ‘d’ ),
open: this.shapeEl.getAttribute( ‘data-morph-open’ )
};
this.isOpen = false;
this.initEvents();
};
SVGDDMenu.prototype.initEvents = function() {
this.el.addEventListener( ‘click’, this.toggle.bind(this) );
// For Demo purposes only
[].slice.call( this.el.querySelectorAll(‘a’) ).forEach( function(el) {
el.onclick = function() { return false; }
} );
};
SVGDDMenu.prototype.toggle = function() {
varself= this;
if( this.isOpen ) {
classie.remove( self.el, ‘menu–open’ );
}
else{
classie.add( self.el, ‘menu–open’ );
}
this.pathEl.stop().animate( { ‘path’ : this.paths.open }, 320, mina.easeinout, function() {
self.pathEl.stop().animate( { ‘path’ : self.paths.reset }, 1000, mina.elastic );
} );
this.isOpen = !this.isOpen;
};
newSVGDDMenu( document.getElementById( ‘menu’ ) );
})();
|
منبع:سون لرن
