Reload Page ❖ Rocking Rolling Rounded Menuweb created
Css
Jquery
Html
Result
Show Result

Edit in JSFiddle

xxxxxxxxxx
 
​

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

 
1
#rocking-rolling {
2
  width:auto;
3
  height:52px;
4
  text-align:left;
5
  font-family:"Trebuchet MS",sans-serif;
6
  font-size:16px;
7
  font-style:normal;
8
  font-weight:bold;
9
  text-transform:uppercase;
10
}
11
​
12
#rocking-rolling h2, #rocking-rolling p, #rocking-rolling form {
13
  /* netralisasi tampilan elemen heading, paragraf dan formulir */
14
  margin:0 0 0 0;
15
  pading:0 0 0 0;
16
  border:none;
17
  background:transparent;
18
}
19
​
20
#rocking-rolling .item {
21
  position:relative;
22
  background-color:#f0f0f0;
23
  float:right;
24
  width:52px;
25
  margin:0px 5px;
26
  height:52px;
27
  -webkit-border-radius:30px;
28
  -moz-border-radius:30px;
29
  -webkit-border-radius:30px;
30
  -webkit-box-shadow:1px 1px 3px #555;
31
  -moz-box-shadow:1px 1px 3px #555;
32
  box-shadow:1px 1px 3px #555;
33
  cursor:pointer;
34
  overflow:hidden;
35
}
36
​
37
#rocking-rolling .link {
38
  left:2px;
39
  top:2px;
40
  position:absolute;
41
  width:48px;
42
  height:48px;
43
}
44
​
45
#rocking-rolling .icon_home   {background:transparent url(https://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;}
46
#rocking-rolling .icon_mail   {background:transparent url(https://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;}
47
#rocking-rolling .icon_help   {background:transparent url(https://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;}
48
#rocking-rolling .icon_find   {background:transparent url(https://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;}
49
#rocking-rolling .icon_photos {background:transparent url(https://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;}
50
​
51
#rocking-rolling .item_content {
52
  position:absolute;
53
  height:52px;
54
  width:220px;
55
  overflow:hidden;
56
  left:56px;
57
  top:7px;
58
  background:transparent;
59
  display:none;
60
}
61
​
62
#rocking-rolling .item_content h2 {
63
  color:#aaa;
64
  text-shadow:1px 1px 1px #fff;
65
  background-color:transparent;
66
  font-size:14px;
67
}
68
​
69
#rocking-rolling .item_content a {
70
  background-color:transparent;
71
  float:left;
72
  margin-right:7px;
73
  margin-top:3px;
74
  color:#bbb;
75
  text-shadow:1px 1px 1px #fff;
76
  text-decoration:none;
77
  font-size:12px;
78
}
79
​
80
#rocking-rolling .item_content a:hover {color:#0b965b;}
81
​
82
#rocking-rolling .item_content p {
83
  background-color:transparent;
84
  text-transform:none;
85
  font-weight:normal !important;
86
  display:none;
87
}
88
​
89
#rocking-rolling .item_content p input {
90
  border:1px solid #ccc;
91
  padding:1px;
92
  width:155px;
93
  float:left;
94
  margin-right:5px;
95
  -webkit-box-shadow:none;
96
  -moz-box-shadow:none;
97
  box-shadow:none;
98
}
xxxxxxxxxx
 
​

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

3
 
1
2
function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)});
3
​
39
 
1
<div id="rocking-rolling">
2
 <div class="item">
3
  <a class="link icon_mail"></a>
4
  <div class="item_content">
5
   <h2>Kontak Saya</h2>
6
   <p><a href="https://idtutorplus.blogspot.com/">eMail</a> <a href="https://idtutorplus.blogspot.com/">Twitter</a> <a href="https://idtutorplus.blogspot.com/">Facebook</a> </p>
7
  </div>
8
 </div>
9
 <div class="item">
10
  <a class="link icon_help"></a>
11
  <div class="item_content">
12
   <h2>Bantuan</h2>
13
   <p><a href="https://idtutorplus.blogspot.com/">Buku Tamu</a> <a href="https://idtutorplus.blogspot.com/">Lapor</a> <a href="https://idtutorplus.blogspot.com/">Kritik dan Saran</a></p>
14
  </div>
15
 </div>
16
 <div class="item">
17
  <a class="link icon_find"></a>
18
  <div class="item_content">
19
   <h2>Telusuri</h2>
20
   <p></p>
21
   <form class="searchform" action="https://idtutorplus.blogspot.com/search/" method="get"><input onfocus="return true;" name="q" type="text"></form>
22
   <p></p>
23
  </div>
24
 </div>
25
 <div class="item">
26
  <a class="link icon_photos"></a>
27
  <div class="item_content">
28
   <h2>Galeri Foto</h2>
29
   <p><a href="https://idtutorplus.blogspot.com/p/archive.html">Kategori</a> <a href="https://idtutorplus.blogspot.com/p/archive.html">Arsip</a> <a href="https://idtutorplus.blogspot.com/p/archive.html">Daftar Isi</a> </p>
30
  </div>
31
 </div>
32
 <div class="item">
33
  <a class="link icon_home"></a>
34
  <div class="item_content">
35
   <h2>Mulai dari Sini</h2>
36
   <p><a href="https://idtutorplus.blogspot.com/">Pelayanan</a> <a href="https://idtutorplus.blogspot.com/">Portfolio</a> <a href="https://idtutorplus.blogspot.com/">Pembayaran</a> </p>
37
  </div>
38
 </div>
39
</div>