Ajax Loader
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html lang="ru" class="no-js">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<title>Menu</title>
7
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
8
</head>
9
<body>
10
    <nav id="bt-menu" class="bt-menu">
11
      <a href="#" class="bt-menu-trigger"><span>Меню</span></a>
12
      <ul>
13
        <li><a href="#">About</a></li>
14
        <li><a href="#">Works</a></li>
15
        <li><a href="#">Clients</a></li>
16
        <li><a href="#">Blog</a></li>
17
        <li><a href="#">Contacts</a></li>
18
      </ul>
19
      <ul>
20
        <li><a href="http://www.twitter.com/pcvector" class="bt-icon icon-twitter">Twitter</a></li>
21
        <li><a href="https://plus.google.com/" class="bt-icon icon-gplus">Google+</a></li>
22
        <li><a href="http://www.facebook.com/" class="bt-icon icon-facebook">Facebook</a></li>
23
        <li><a href="https://github.com" class="bt-icon icon-github">icon-github</a></li>
24
      </ul>
25
    </nav>
26
</body>
27
</html>
 
CSS 
html{
1
html{
2
  background:#f1f1f1;
3
}
4
*,*:after,*::before {
5
    -webkit-box-sizing: border-box;
6
    -moz-box-sizing: border-box;
7
    box-sizing: border-box;
8
}
9
 
10
.bt-menu {
11
  position: fixed;
12
  top: 0;
13
  left: 0;
14
  width: 100%;
15
  height: 0;
16
  border-width: 0px;
17
  border-style: solid;
18
  border-color: #333;
19
  background-color: rgba(0,0,0,0);
20
  -webkit-backface-visibility: hidden;
21
  -webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
22
  transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
23
}
24
 
25
.bt-menu.bt-menu-open {
26
  height: 100%;
27
  border-width: 0px 0px 50px 150px;
28
  background-color: rgba(0,0,0,0.3);
29
  -webkit-transition: border-width 0.3s, background-color 0.3s;
30
  transition: border-width 0.3s, background-color 0.3s;
31
}
32
 
33
.bt-overlay {
34
  position: absolute;
35
  width: 100%;
36
}
37
 
38
.bt-menu-open .bt-overlay {
39
  height: 100%;
40
}
41
 
42
.bt-menu-trigger {
43
  position: fixed;
44
  top: 10px;
45
  left: 20px;
46
  z-index: 100;
47
  display: block;
48
  width: 50px;
49
  height: 50px;
50
  cursor: pointer;
51
}
52
 
53
.bt-menu-trigger span {
54
  position: absolute;
55
  top: 50%;
56
  left: 0;
57
  display: block;
58
  width: 100%;
59
  height: 8%;
60
  background-color: #fff;
61
  font-size: 0px;
62
  -webkit-touch-callout: none;
63
  -webkit-user-select: none;
64
  -khtml-user-select: none;
65
  -moz-user-select: none;
66
  -ms-user-select: none;
67
  user-select: none;
68
  -webkit-transition: background-color 0.3s;
69
  transition: background-color 0.3s;
70
}
71
 
72
.bt-menu-trigger span:before,
73
.bt-menu-trigger span:after {
74
  position: absolute;
75
  left: 0;
76
  width: 100%;
77
  height: 100%;
78
  background: #fff;
79
  content: '';
80
  -webkit-transition: -webkit-transform 0.3s;
81
  transition: transform 0.3s;
82
}
83
 
84
.bt-menu-trigger span:before {
85
  -webkit-transform: translateY(-250%);
86
  transform: translateY(-250%);
87
}
88
 
89
.bt-menu-trigger span:after {
90
  -webkit-transform: translateY(250%);
91
  transform: translateY(250%);
92
}
93
 
94
.bt-menu-open .bt-menu-trigger span:before {
95
  -webkit-transform: translateY(-300%);
96
  transform: translateY(-300%);
97
}
98
 
99
.bt-menu-open .bt-menu-trigger span:after {
100
  -webkit-transform: translateY(300%);
101
  transform: translateY(300%);
102
}
103
 
104
.bt-menu ul {
105
  position: fixed;
106
  margin: 0;
107
  padding: 0;
108
  list-style: none;
109
}
110
 
111
.bt-menu ul:first-of-type {
112
  top: 75px;
113
  left: 0;
114
}
115
 
116
.bt-menu ul:nth-of-type(2) {
117
  right: 0;
118
  bottom: 0;
119
}
120
 
121
.bt-menu ul li,
122
.bt-menu ul li a {
123
  display: block;
124
}
125
 
126
.bt-menu ul:nth-of-type(2) li {
127
  float: left;
128
  font-size: 0px;
129
}
130
 
131
.bt-menu ul li {
132
  visibility: hidden;
133
  opacity: 0;
134
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
135
  transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
136
}
137
 
138
.bt-menu.bt-menu-open ul:first-of-type li,
139
.bt-menu.bt-menu-open ul:nth-of-type(2) li {
140
  visibility: visible;
141
  opacity: 1;
142
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s 0.1s;
143
  transition: transform 0.3s, opacity 0.3s;
144
}
145
 
146
/* First menu */
147
.bt-menu ul:first-of-type li {
148
  width: 150px;
149
  height: 50px;
150
  line-height: 50px;
151
  -webkit-transform: translate3d(-100%,50%,0);
152
  transform: translate3d(-100%,50%,0);
153
}
154
 
155
.bt-menu.bt-menu-open ul:first-of-type li {
156
  -webkit-transform: translate3d(0,0,0);
157
  transform: translate3d(0,0,0);
158
}
159
 
160
/* Second menu */
161
.bt-menu ul:nth-of-type(2) li {
162
  width: 60px;
163
  height: 50px;
164
  line-height: 50px;
165
  -webkit-transform: scale(0);
166
  transform: scale(0);
167
}
168
 
169
.bt-menu.bt-menu-open ul:nth-of-type(2) li:first-child {
170
  -webkit-transition-delay: 0.1s;
171
  transition-delay: 0.1s;
172
}
173
 
174
.bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(2) {
175
  -webkit-transition-delay: 0.2s;
176
  transition-delay: 0.2s;
177
}
178
 
179
.bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(3) {
180
  -webkit-transition-delay: 0.3s;
181
  transition-delay: 0.3s;
182
}
183
 
184
.bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(4) {
185
  -webkit-transition-delay: 0.4s;
186
  transition-delay: 0.4s;
187
}
188
 
189
.bt-menu.bt-menu-open ul:nth-of-type(2) li {
190
  -webkit-transform: scale(1);
191
  transform: scale(1);
192
}
193
 
194
.bt-menu ul li a {
195
  display: block;
196
  outline: none;
197
  text-decoration: none;
198
}
199
 
200
.bt-menu ul:first-of-type li a {
201
  padding: 0 20px;
202
  box-shadow: inset 0 1px rgba(0,0,0,0.2);
203
  color: #fff;
204
  text-transform: uppercase;
205
  letter-spacing: 1px;
206
  font-size: 1em;
207
  -webkit-transition: color 0.2s;
208
  transition: color 0.2s;
209
}
210
 
211
.bt-menu ul:first-of-type li:last-child a {
212
  box-shadow: inset 0 1px rgba(0,0,0,0.2), inset 0 -1px rgba(0,0,0,0.2);
213
}
214
 
215
.bt-menu ul:nth-of-type(2) li a {
216
  color: transparent;
217
  text-align: center;
218
  font-size: 0px;
219
}
220
 
221
.bt-menu ul li a:before {
222
  color: #fff;
223
  font-size: 24px;
224
  -webkit-transition: color 0.2s;
225
  transition: color 0.2s;
226
}
227
 
228
.bt-menu ul:first-of-type li a:hover,
229
.bt-menu ul:first-of-type li a:focus,
230
.bt-menu ul li a:hover:before,
231
.bt-menu ul li a:focus:before {
232
  color: #1abc9c;
233
}
 
JavaScript 
( function( window ) {
1
( function( window ) {
2
'use strict';
3
function classReg( className ) {
4
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
5
}
6
var hasClass, addClass, removeClass;
7
if ( 'classList' in document.documentElement ) {
8
  hasClass = function( elem, c ) {
9
    return elem.classList.contains( c );
10
  };
11
  addClass = function( elem, c ) {
12
    elem.classList.add( c );
13
  };
14
  removeClass = function( elem, c ) {
15
    elem.classList.remove( c );
16
  };
17
}
18
else {
19
  hasClass = function( elem, c ) {
20
    return classReg( c ).test( elem.className );
21
  };
22
  addClass = function( elem, c ) {
23
    if ( !hasClass( elem, c ) ) {
24
      elem.className = elem.className + ' ' + c;
25
    }
26
  };
27
  removeClass = function( elem, c ) {
28
    elem.className = elem.className.replace( classReg( c ), ' ' );
29
  };
30
}
31
 
32
function toggleClass( elem, c ) {
33
  var fn = hasClass( elem, c ) ? removeClass : addClass;
34
  fn( elem, c );
35
}
36
 
37
var classie = {
38
  hasClass: hasClass,
39
  addClass: addClass,
40
  removeClass: removeClass,
41
  toggleClass: toggleClass,
42
  has: hasClass,
43
  add: addClass,
44
  remove: removeClass,
45
  toggle: toggleClass
46
};
47
 
48
// transport
49
if ( typeof define === 'function' && define.amd ) {
50
  // AMD
51
  define( classie );
52
} else {
53
  // browser global
54
  window.classie = classie;
55
}
56
 
57
})( window );
58
/*-------------------------------------*/
59
(function() {
60
  function mobilecheck() {
61
    var check = false;
62
    (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
63
    return check;
64
  }
65
 
66
  function init() {
67
 
68
    var menu = document.getElementById( 'bt-menu' ),
69
      trigger = menu.querySelector( 'a.bt-menu-trigger' ),
70
      // triggerPlay only for demo 6
71
      triggerPlay = document.querySelector( 'a.bt-menu-trigger-out' ),
72
      // event type (if mobile use touch events)
73
      eventtype = mobilecheck() ? 'touchstart' : 'click',
74
      resetMenu = function() {
75
        classie.remove( menu, 'bt-menu-open' );
76
        classie.add( menu, 'bt-menu-close' );
77
      },
78
      closeClickFn = function( ev ) {
79
        resetMenu();
80
        overlay.removeEventListener( eventtype, closeClickFn );
81
      };
82
 
83
    var overlay = document.createElement('div');
84
    overlay.className = 'bt-overlay';
85
    menu.appendChild( overlay );
86
 
87
    trigger.addEventListener( eventtype, function( ev ) {
88
      ev.stopPropagation();
89
      ev.preventDefault();
90
91
      if( classie.has( menu, 'bt-menu-open' ) ) {
92
        resetMenu();
93
      }
94
      else {
95
        classie.remove( menu, 'bt-menu-close' );
96
        classie.add( menu, 'bt-menu-open' );
97
        overlay.addEventListener( eventtype, closeClickFn );
98
      }
99
    });
100
 
101
    if( triggerPlay ) {
102
      triggerPlay.addEventListener( eventtype, function( ev ) {
103
        ev.stopPropagation();
104
        ev.preventDefault();
105
 
106
        classie.remove( menu, 'bt-menu-close' );
107
        classie.add( menu, 'bt-menu-open' );
108
        overlay.addEventListener( eventtype, closeClickFn );
109
      });
110
    }
111
 
112
  }
113
 
114
  init();
115
 
116
})();
 

Animated border menu

CSSDeck G+