Ajax Loader
HTML 
<div class="menu-outer">
1
<div class="menu-outer">
2
    <div class="menu-icon">
3
        <div class="bar"></div>
4
        <div class="bar"></div>
5
        <div class="bar"></div>
6
    </div>
7
    <nav>
8
        <ul>
9
           <li><a href="#">Articles</a></li>
10
           <li><a href="#">Projects</a></li>
11
           <li><a href="#">About</a></li>
12
            <li><a href="#">Contact</a></li>
13
       </ul>
14
   </nav>
15
</div>
16
<a class="menu-close" onClick="return true">
17
    <div class="menu-icon">
18
        <div class="bar"></div>
19
        <div class="bar"></div>
20
    </div>
21
</a>
 
CSS 
/* Stuff I added */
1
/* Stuff I added */
2
.menu-outer:hover ~ .menu-close {
3
  margin-right:-100px;
4
}
5
.menu-outer:hover .bar { background:rgba(100,200,240,.9); }
6
.menu-outer > nav ul { top:15%; }
7
 
8
/* The rest I chnaged parts but not most of it */
9
 
10
html, body {
11
  background: rgba(20,20,20,1);
12
}
13
 
14
.menu-outer {
15
  overflow: hidden;
16
  position: fixed;
17
  top: 0;
18
  font-family: 'Montserrat', serif;
19
  z-index: 998;
20
  width: 100%;
21
  left: 100%;
22
  margin-left: -100px;
23
  height: 200%;
24
  background: rgba(100,200,240,.9);
25
  -webkit-transition: all ease .5s;
26
  -moz-transition: all ease .5s;
27
  -ms-transition: all ease .5s;
28
  -o-transition: all ease .5s;
29
  transition: all ease .5s;
30
  -webkit-transform-origin: top left;
31
  -moz-transform-origin: top left;
32
  -ms-transform-origin: top left;
33
  -o-transform-origin: top left;
34
  transform-origin: top left;
35
  -webkit-transform: rotate(-45deg);
36
  -moz-transform: rotate(-45deg);
37
  -ms-transform: rotate(-45deg);
38
  -o-transform: rotate(-45deg);
39
  transform: rotate(-45deg);
40
}
41
.menu-outer:hover {
42
  background: rgba(100,200,240,.98);
43
  left: 0;
44
  margin-left: 0;
45
  -webkit-transform: rotate(0deg);
46
  -moz-transform: rotate(0deg);
47
  -ms-transform: rotate(0deg);
48
  -o-transform: rotate(0deg);
49
  transform: rotate(0deg);
50
}
51
.menu-icon {
52
  z-index: 999;
53
  position: absolute;
54
  top: 58px;
55
  left: 15px;
56
  width: 30px;
57
  pointer-events: none;
58
  -webkit-transform: rotate(45deg);
59
  -moz-transform: rotate(45deg);
60
  -ms-transform: rotate(45deg);
61
  -o-transform: rotate(45deg);
62
  transform: rotate(45deg);
63
  -webkit-transition: all ease .5s;
64
  -moz-transition: all ease .5s;
65
  -ms-transition: all ease .5s;
66
  -o-transition: all ease .5s;
67
  transition: all ease .5s;
68
}
69
.menu-icon .bar {
70
  background: rgba(250,250,250,1);
71
  width: 100%;
72
  height: 5px;
73
  margin: 0 0 5px;
74
  -webkit-transition: all ease .5s;
75
  -moz-transition: all ease .5s;
76
  -ms-transition: all ease .5s;
77
  -o-transition: all ease .5s;
78
  transition: all ease .5s;
79
}
80
.menu-outer:hover > .menu-icon {
81
  opacity: 0;
82
}
83
nav ul {
84
  position:absolute;
85
  width:100%;
86
  padding: 0;
87
  left: 10%;; /*prevents possible click when not oppened*/
88
  -webkit-transition: all ease .5s;
89
  -moz-transition: all ease .5s;
90
  -ms-transition: all ease .5s;
91
  -o-transition: all ease .5s;
92
  transition: all ease .5s;
93
}
94
.menu-outer:hover > nav ul {
95
  left: 0;
96
}
97
nav li {
98
  list-style:none;
99
  text-align: center;
100
  text-transform: uppercase;
101
}
102
nav li a {
103
  font-size: 2em;
104
  color: rgba(255,255,255,.8);
105
  text-decoration: none;
106
  margin: 0 auto;
107
  padding: 20px;
108
  display:block;
109
  -webkit-transition: all ease .5s;
110
  -moz-transition: all ease .5s;
111
  -ms-transition: all ease .5s;
112
  -o-transition: all ease .5s;
113
  transition: all ease .5s;
114
}
115
nav li a:hover {
116
  color: rgba(255,255,255,1);
117
}
118
@media screen and (max-width: 600px), screen and (max-height: 600px) {
119
  nav ul {font-size:.75em;}
120
  nav ul a {padding: 10px;}
121
}
122
.menu-close {
123
  z-index: 9999;
124
  position: fixed;
125
  top: 0;
126
  right: 100%;
127
  width: 200px;
128
  height: 200px;
129
  background: rgba(250,130,70,1);
130
  cursor: pointer;
131
  -webkit-transition: all ease .5s;
132
  -moz-transition: all ease .5s;
133
  -ms-transition: all ease .5s;
134
  -o-transition: all ease .5s;
135
  transition: all ease .5s;
136
  -webkit-transform-origin: top right;
137
  -moz-transform-origin: top right;
138
  -ms-transform-origin: top right;
139
  -o-transform-origin: top right;
140
  transform-origin: top right;
141
  -webkit-transform: rotate(45deg);
142
  -moz-transform: rotate(45deg);
143
  -ms-transform: rotate(45deg);
144
  -o-transform: rotate(45deg);
145
  transform: rotate(45deg);
146
}
147
.menu-close .menu-icon {
148
  right: 15px; left: auto;top: 68px;
149
  -webkit-transform: rotate(-45deg);
150
  -moz-transform: rotate(-45deg);
151
  -ms-transform: rotate(-45deg);
152
  -o-transform: rotate(-45deg);
153
  transform: rotate(-45deg);
154
}
155
.menu-close .bar {
156
  background: rgba(250,250,250,1);
157
  width: 100%;
158
  height: 5px;
159
  position:absolute;
160
  -webkit-transform-origin: center;
161
  -moz-transform-origin: center;
162
  -ms-transform-origin: center;
163
  -o-transform-origin: center;
164
  transform-origin: center;
165
}
166
.menu-close .bar:first-child {
167
  -webkit-transform: rotate(45deg);
168
  -moz-transform: rotate(45deg);
169
  -ms-transform: rotate(45deg);
170
  -o-transform: rotate(45deg);
171
  transform: rotate(45deg);
172
}
173
.menu-close .bar:last-child {
174
  -webkit-transform: rotate(-45deg);
175
  -moz-transform: rotate(-45deg);
176
  -ms-transform: rotate(-45deg);
177
  -o-transform: rotate(-45deg);
178
  transform: rotate(-45deg);
179
}
 

CSS Menu from side

CSSDeck G+