Reload Page ❖ Navigasi Menu Transitionweb created
Css
Jquery
Html
Result
Show Result

Edit in JSFiddle

xxxxxxxxxx
 
​

https:////example.com/style.css X

 
1
body {
2
  background-color:#eee;
3
  text-align:center;
4
}
5
​
6
@import url(https:////fonts.googleapis.com/css?family=Dosis:400,700);
7
​
8
.navbar {
9
    font-family: 'Dosis', sans-serif;
10
    position: relative;
11
    display: table;
12
    float: none;
13
    list-style-type: none;
14
    padding: 0;
15
    margin: 20px auto 250px auto;
16
}
17
​
18
.navbar:before {
19
    position: absolute;
20
    display: block;
21
    content: "";
22
    z-index: -1;
23
    width: 100%;
24
    height: 18px;
25
    bottom: -9px;
26
    left: 2px;
27
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 75%);
28
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.7)), color-stop(75%,rgba(0,0,0,0)));
29
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
30
    background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
31
    background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
32
    background: radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
33
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=1 );
34
    opacity: .4;
35
}
36
​
37
.navbar:after {
38
    position: absolute;
39
    display: block;
40
    content: "";
41
    z-index: -1;
42
    width: 100%;
43
    height: 100%;
44
    top: 0;
45
    left: 0;
46
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
47
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
48
}
49
​
50
.navbar > li {
51
    position: relative;
52
    float: left;
53
    display: inline-block;
54
    list-style-type: none;
55
    text-align: center;
56
    margin: 0;
57
    border-left: 0;
58
    border: 1px solid rgba(0,0,0,0.5);
59
    line-height: 35px;
60
    -webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
61
    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
62
    -webkit-transition: all 300ms ease-in-out;
63
    -moz-transition: all 300ms ease-in-out;
64
    -ms-transition: all 300ms ease-in-out;
65
    -o-transition: all 300ms ease-in-out;
66
    transition: all 300ms ease-in-out;
67
}
68
​
69
.navbar.color1 > li {
70
    background: #ea7900;
71
}
72
​
73
.navbar.color2 > li {
74
    background: #336277;
75
}
76
​
77
.navbar.color3 > li {
78
    background: #3e781b;
79
}
80
​
81
.navbar.color4 > li {
82
    background: #ad2259;
83
}
84
​
85
.navbar.color5 > li {
86
    background: #b20a22;
87
}
88
​
89
.navbar > li:before {
90
    position: absolute;
91
    display: block;
92
    content: "";
93
    z-index: 1;
94
    width: 100%;
95
    height: 100%;
96
    left: 0;
97
    top: 0;
98
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.16) 100%);
99
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.15)), color-stop(100%,rgba(0,0,0,0.16)));
100
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
101
    background: -o-linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
102
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
103
    background: linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
104
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26ffffff', endColorstr='#29000000',GradientType=0 );
105
}
106
​
107
.navbar > li:after {
108
    position: absolute;
109
    display: block;
110
    content: "";
111
    width: 100%;
112
    height: 100%;
113
    top: 0;
114
    left: 0;
115
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OERFQkEzRUJDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OERFQkEzRUNDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4REVCQTNFOUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4REVCQTNFQUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiSp0pIAAAAySURBVHjaYmBgYOAHYmYGCADR/CDiDxDzQAW5gPgLlM3ACsQKUBqhBYjZkY3CMBMgwACvHQKnyUp+6gAAAABJRU5ErkJggg==");
116
}
117
​
118
.navbar > li.drpdown a > span {
119
    margin-right: 30px;
120
}
121
​
122
.navbar > li.drpdown > a:after {
123
    position: absolute;
124
    content: "\0025bc";
125
    z-index: 1;
126
    font-size: 8px;
127
    top: 0;
128
    right: 10px;
129
    color: #fff;
130
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8);
131
    filter: dropshadow(color=#000, offx=0, offy=-1);
132
    -webkit-transition: all 300ms ease-in-out;
133
    -moz-transition: all 300ms ease-in-out;
134
    -ms-transition: all 300ms ease-in-out;
135
    -o-transition: all 300ms ease-in-out;
136
    transition: all 300ms ease-in-out;
137
}
138
​
139
.navbar > li.drpdown a:hover:after,.navbar > li a:hover {
140
    color: #ccc;
141
}
142
​
143
.navbar > li.drpdown:hover .drpcontent {
144
    display: block;
145
}
146
​
147
.navbar > li:first-child {
148
    border-left: 1px solid #1a1a1a;
149
}
150
​
151
.navbar > li:last-child {
152
    -webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
153
    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25), inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
154
}
155
​
156
.navbar > li > a {
157
    position: relative;
158
    display: block;
159
    width: 100%;
160
    text-decoration: none;
161
    font-size: 12px;
162
    color: #fff;
163
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
164
    filter: dropshadow(color=#000, offx=0, offy=-1);
165
    z-index: 4;
166
    -webkit-transition: all 300ms ease-in-out;
167
    -moz-transition: all 300ms ease-in-out;
168
    -ms-transition: all 300ms ease-in-out;
169
    -o-transition: all 300ms ease-in-out;
170
    transition: all 300ms ease-in-out;
171
}
172
​
173
.navbar > li:hover {
174
    -webkit-box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 0.35);
175
    box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 0.35);
176
}
177
​
178
.navbar > li > a > span {
179
    position: relative;
180
    font-weight: bold;
181
    margin: 0 15px 0 0;
182
}
183
​
184
.navbar > li  .drpcontent {
185
    position: absolute;
186
    display: none;
187
    margin: 0;
188
    padding: 20px 0 0 0;
189
    z-index: 5;
190
    top: 36px;
191
    min-width: 200%;
192
    float: none;
193
    list-style-type: none;
194
    border: 1px solid #737373;
195
    border-top: 0;
196
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),inset 0px 6px 4px -4px rgba(0, 0, 0, 0.5);
197
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),inset 0px 6px 4px -4px rgba(0, 0, 0, 0.5);
198
    -webkit-border-radius: 0px 0px 4px 4px;
199
    border-radius: 0px 0px 4px 4px;
200
    background: rgb(249,249,249);
201
    background: -moz-linear-gradient(-45deg,  rgba(249,249,249,1) 0%, rgba(229,229,229,1) 100%);
202
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(229,229,229,1)));
203
    background: -webkit-linear-gradient(-45deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
204
    background: -o-linear-gradient(-45deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
205
    background: -ms-linear-gradient(-45deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
206
    background: linear-gradient(135deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
207
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e5e5e5',GradientType=1 );
208
    -webkit-transition: opacity 300ms ease-in-out;
209
    -moz-transition: opacity 300ms ease-in-out;
210
    -ms-transition: opacity 300ms ease-in-out;
211
    -o-transition: opacity 300ms ease-in-out;
212
    transition: opacity 300ms ease-in-out;
213
}
214
​
215
.navbar > li:not(:last-of-type) .drpcontent {
216
    left: -1px;
217
}
218
​
219
.navbar > li:last-child .drpcontent {
220
    right: -1px;
221
}
222
​
223
.drpcontent li {
224
    position: relative;
225
    text-align: left;
226
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
227
    font-size: 12px;
228
    line-height: 35px;
229
    height: 35px;
230
    font-weight: bold;
231
    -webkit-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
232
    box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
233
    overflow: hidden;
234
}
235
​
236
.drpcontent li:before {
237
    position: absolute;
238
    display: block;
239
    content: "";
240
    width: 100%;
241
    height: 100%;
242
    top: -100%;
243
    left: 0;
244
    background: #cecece;
245
    -webkit-transition: all 500ms ease-in-out;
246
    -moz-transition: all 500ms ease-in-out;
247
    -ms-transition: all 500ms ease-in-out;
248
    -o-transition: all 500ms ease-in-out;
249
    transition: all 500ms ease-in-out;
250
    opacity: 0;
251
}
252
​
253
.drpcontent li:after {
254
    position: absolute;
255
    display: block;
256
    content: "\0025b6";
257
    height: 20px;
258
    width: 20px;
259
    top: 0;
260
    left: 6px;
261
    font-size: 8px;
262
    -webkit-transition: all 500ms ease-in-out;
263
    -moz-transition: all 500ms ease-in-out;
264
    -ms-transition: all 500ms ease-in-out;
265
    -o-transition: all 500ms ease-in-out;
266
    transition: all 500ms ease-in-out;
267
}
268
​
269
.drpcontent li:hover:before {
270
    top: 0;
271
    opacity: 0.8;
272
}
273
​
274
.drpcontent li:hover:after {
275
    color: #fff;
276
    left: 12px;
277
}
278
​
279
.drpcontent li:last-child:hover:before {
280
    -webkit-border-radius: 0px 0px 4px 4px;
281
    border-radius: 0px 0px 4px 4px;
282
}
283
​
284
.drpcontent li a {
285
    display: block;
286
    height: 100%;
287
    width: 100%;
288
    position: relative;
289
    color: #000;
290
    text-decoration: none;
291
    width: 100%;
292
    padding-left: 20px;
293
    -webkit-transition: all 500ms ease-in-out;
294
    -moz-transition: all 500ms ease-in-out;
295
    -ms-transition: all 500ms ease-in-out;
296
    -o-transition: all 500ms ease-in-out;
297
    transition: all 500ms ease-in-out;
298
}
299
​
300
.drpcontent li:hover a {
301
    color: #fff;
302
    padding-left: 26px;
303
}
304
​
305
.drpcontent li:first-child {
306
    border-top: 1px solid #a6a6a6;
307
}
308
​
309
.drpcontent li:last-child {
310
    border: 0;
311
    -webkit-box-shadow: none;
312
    box-shadow: none;
313
    -webkit-border-radius: 0px 0px 4px 4px;
314
    border-radius: 0px 0px 4px 4px;
315
}
316
​
317
.icon20 {
318
    position: relative;
319
    float: left;
320
    display: block;
321
    width: 20px;
322
    height: 20px;
323
    margin: 6px 8px 0 8px;
324
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAYAAAA16j4lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjJERkRDNTBDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjJERkRDNTFDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MkRGREM0RUM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MkRGREM0RkM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psj8MzMAAA91SURBVHja7FxbbBTV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") no-repeat;
325
    -webkit-transition: all 300ms ease-in-out;
326
    -moz-transition: all 300ms ease-in-out;
327
    -ms-transition: all 300ms ease-in-out;
328
    -o-transition: all 300ms ease-in-out;
329
    transition: all 300ms ease-in-out;
330
}
331
​
332
.icon20.home {
333
    background-position: 0 0;
334
}
335
​
336
.icon20.upload {
337
    background-position: -20px 0;
338
}
339
​
340
.icon20.download {
341
    background-position: -40px 0;
342
}
343
​
344
.icon20.comments {
345
    background-position: -60px 0;
346
}
347
​
348
.icon20.theme {
349
    background-position: -80px 0;
350
}
351
​
352
.icon20.login {
353
    background-position: -100px 0;
354
}
355
​
356
.navbar > li:hover .icon20.home {
357
    background-position: 0 -20px;
358
}
359
​
360
.navbar > li:hover .icon20.upload {
361
    background-position: -20px -20px;
362
}
363
​
364
.navbar > li:hover .icon20.download {
365
    background-position: -40px -20px;
366
}
367
​
368
.navbar > li:hover .icon20.comments {
369
    background-position: -60px -20px;
370
}
371
​
372
.navbar > li:hover .icon20.theme {
373
    background-position: -80px -20px;
374
}
375
​
376
.navbar > li:hover .icon20.login {
377
    background-position: -100px -20px;
378
}
xxxxxxxxxx
 
​

https:////example.com/script.js X

1
 
1
...........
34
 
1
<ul class="navbar color1">
2
    <li><a href="https:////kod-tutor.blogspot.com/"><i class="icon20 home"></i><span>Home</span></a>
3
    </li>
4
    <li><a href="#"><i class="icon20 upload"></i><span>Upload</span></a>
5
    </li>
6
    <li class="drpdown"><a href="#"><i class="icon20 comments"></i><span>Posts</span></a>
7
​
8
        <ul class="drpcontent">
9
            <li><a href="#">Latest Posts</a>
10
            </li>
11
            <li><a href="#">Popular Posts</a>
12
            </li>
13
            <li><a href="#">Private Posts</a>
14
            </li>
15
        </ul>
16
    </li>
17
    <li><a href="#"><i class="icon20 login"></i><span>Login</span></a>
18
    </li>
19
    <li class="drpdown"><a href="https:////kod-tutor.blogspot.com/"><i class="icon20 theme"></i><span>Themeselector</span></a>
20
​
21
        <ul class="drpcontent" id="themeselect">
22
            <li><a href="#" data-color="color1">Orange</a>
23
            </li>
24
            <li><a href="#" data-color="color2">Marine</a>
25
            </li>
26
            <li><a href="#" data-color="color3">Green</a>
27
            </li>
28
            <li><a href="#" data-color="color4">Purple</a>
29
            </li>
30
            <li><a href="#" data-color="color5">Red</a>
31
            </li>
32
        </ul>
33
    </li>
34
</ul>