JSDM

HTML

 
1
<p class="intro">From: <a href="https://dribbble.com/shots/1689922-Side-Menu-Animation" target="_blank">Side Menu Animation
2
by Dmitry Prudnikov on Dribbble</a></p>
3
​
4
​
5
<div class="container">
6
  <div class="wrapper">
7
    <div class="content">
8
    
9
      <i class="fa fa-bars menu-toggle"></i>
10
    
11
      <header>
12
      
13
        <h1>Section</h1>
14
      
15
      </header>
16
      <main class="view view--1">
17
      
18
        <img src="http://placehold.it/640x400">
19
        <img src="http://placehold.it/640x400">
20
        <img src="http://placehold.it/640x400">
21
        <img src="http://placehold.it/640x400">
22
      
23
      </main>
24
    </div>
25
    <ul class="menu">
26
      <li><a class="item item-0 menu-toggle"><i class="fa fa-times"></i></a></li>
27
      <li><a class="item item-1"><i class="fa fa-car"></i></a></li>
28
      <li><a class="item item-2"><i class="fa fa-heart"></i></a></li>
29
      <li><a class="item item-3"><i class="fa fa-cloud"></i></a></li>
30
      <li><a class="item item-4"><i class="fa fa-coffee"></i></a></li>
31
      <li><a class="item item-5"><i class="fa fa-dribbble"></i></a></li>
32
      <li><a class="item item-6"><i class="fa fa-book"></i></a></li>
33
      <li><a class="item item-7"><i class="fa fa-book"></i></a></li>
34
    </ul>
35
  </div>
36
</div>
!

CSS

xxxxxxxxxx
136
 
1
.intro{
2
  text-align: center;
3
  line-height: 2em;
4
5
  margin: 0;
6
7
  font-size: .8em;
8
9
  font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
10
}
11
​
12
.container{
13
  width: 640px;
14
  height: 1136px;
15
​
16
  border-radius: 80px;
17
  padding: 160px 30px;
18
  background-color: #333;
19
20
  display: block;
21
  margin: 60px auto;
22
23
  transform: scale(.5) translateY(-50%);
24
  
25
}
26
​
27
.wrapper{
28
  width: 100%;
29
  height: 100%;
30
  border-radius: 10px;
31
  background-color: #fdfdfd;
32
  overflow: hidden;
33
34
  position: relative;
35
36
37
}
38
​
39
$size: 142px;
40
​
41
.header{
42
​
43
  display: block;
44
45
}
46
​
47
h1{
48
  font-family: 'Futura', sans-serif;
49
  color: #333;
50
51
  text-align: center;
52
  line-height: $size;
53
54
  margin: 0;
55
56
  text-transform: uppercase;
57
}
58
​
59
​
60
.menu-toggle{
61
62
  position: absolute;
63
  top: 0;
64
  left: 0;
65
66
  font-size: 3em;
67
  width: $size;
68
  height: $size;
69
  text-align: center;
70
  line-height: $size;
71
  display: block;
72
}
73
​
74
.menu{
75
  position: absolute;
76
  top: 0;
77
  bottom: 0;
78
  list-style: none;
79
  margin: 0;
80
  padding: 0;
81
  transition: all .3s ease;
82
83
  perspective: 2000px;
84
}
85
​
86
  .item{
87
    background-color: #33334c;
88
    border-top: 1px solid #182844;
89
    border-bottom: 1px solid #253149;
90
    color: white;
91
  
92
    width: $size;
93
    height: $size;
94
    line-height: $size;
95
    display: block;
96
    text-align: center;
97
​
98
    transition: transform .6s ease, background-color .1s .15s ease;
99
    transform-origin: left center;
100
    position: relative;
101
  
102
    text-decoration: none;
103
    font-size: 3em;
104
  
105
    &:active{
106
      background-color: #d64a73;
107
      color: white;
108
      transition: all .2s 0 ease;
109
    }
110
  
111
  }
112
​
113
.menu--is-closed{
114
115
  pointer-events: none;
116
117
  .item{
118
    transform: rotateY(180deg);
119
    background-color: #272841;
120
  
121
  }
122
}
123
​
124
$delay-unit: .1s;
125
$n: 7;
126
​
127
@for $i from 0 through $n {
128
  .item-#{$i} {
129
    transition-delay: $delay-unit * ( $n - $i );
130
    z-index: $i;
131
  }
132
133
  .menu--is-closed .item-#{$i} {
134
    transition-delay: $delay-unit * $i;
135
  }
136
}
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
5
 
1
$('.menu-toggle').on('click', function(){
2
3
 console.log('click'); $('.menu').toggleClass('menu--is-closed');
4
5
});
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................