Kode yang digunakan adalah :
Lihat juga contoh lain yang serupa DISINI
<html>
<head>
<style type="text/css">
body {overflow:hidden}
.item {display:inline-block;float:right}
.item ul {padding:0;margin:0;text-align:right}
.item ul li {display:inline;list-style-type:none}
.item ul li a {transition:width 1s;-webkit-transition:width 1s;-moz-transition:width 1s;-ms-transition:width 1s;-o-transition:width 1s;color:#fff;display:inline-block;font-weight:bold;height:27px;overflow:hidden;padding:10px 10px;width:25px;vertical-align:bottom;text-shadow:1px 2px 3px #111}
.item ul li a:hover {width:130px}
.item ul li a:hover span {opacity:1}
.item ul li a span {transition:opacity 1s;-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-ms-transition:opacity 1s;-o-transition:opacity 1s;display:inline-block;overflow:hidden;opacity:0;text-align:left;width:130px}
a.menu1 {background:#FF8C00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJ6sICL1I7w6n2Uhma08ssVH_6H7fkmZjUbHruvyyOiyS8CQWMyh9c0v-c6EgVq8AIg6FvaIlfQRHjDtdf0H9TxCpPXLcMgJ_1X1etMGAKeHtMNTZVLmXPFV8L_4QlnDolpoHwyAEzFc/s47/kode1.png) no-repeat right center}
a.menu2 {background:#39f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic_r8EDnJ_jF4ML3ALvuBkalD69viwV4XKGjjytR-DMT0fKfVrLcXm5qnyb2QCfF79CuSqpGsmZpC81mTwB-1cWup2PHAKZqM2FK88OlS_Y_auDljIxD8brrLlUOF6T628ew1g-RtYb4M/s47/kode2.png) no-repeat right center}
a.menu3 {background:#8B008B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9HBqT_QdEr046vTpGQEFyZnLmZU-01bXYKHK4cI-Dxna0v9CvKN_KcopmTcH2HVe8JyZrD-cVxkh2aq5TwhlnxfO_plHmmbMwxd3puC1WbugptcOpyMKkNJfAc4eXbp6loJdsbvUh5NA/s47/kode3.png) no-repeat right center}
a.menu4 {background:#FF1493 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMLQ6XyCy2JWZZo7IzuJo4WhkNnCihF3qFxy8sgbJHrPM5UCVciSY2VaCTcL7nCEZ_F0yAL2DIGk1BRB1mMHcYIRg7CJpVh5ODi2f369vKxD0TnUazkn5eVHS0uRDDfdjknqfMCHlZslg/s47/kode4.png) no-repeat right center}
a.menu5 {background:blue url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMSlCog_hyphenhyphen6H7Y49RKrF0vTv3xh0Sc1DQV6iknbV586K77iH5PoGsUXFj1-M77gmzW4jYXnWSDUFBA1HZZw_nPnQXqpRnTnyhAps_djkVD1daW7MG6t-bACVVrHlGjDZMQ_kpA6an-1PTE/w45-h47-no/) no-repeat right center}
</style><br />
<body>
<div class="item">
<ul><li>
<a class="menu1" href="#"><span>Lihat »</span></a></li>
<li><a class="menu2" href="#"><span>Lihat »</span></a></li>
<li><a class="menu3" href="#"><span>Lihat »</span></a></li>
<li><a class="menu4" href="#"><span>Lihat »</span></a></li>
<li><a class="menu5" href="#"><span>Lihat »</span></a></li>
</ul></div>
</body>
</html>
<head>
<style type="text/css">
body {overflow:hidden}
.item {display:inline-block;float:right}
.item ul {padding:0;margin:0;text-align:right}
.item ul li {display:inline;list-style-type:none}
.item ul li a {transition:width 1s;-webkit-transition:width 1s;-moz-transition:width 1s;-ms-transition:width 1s;-o-transition:width 1s;color:#fff;display:inline-block;font-weight:bold;height:27px;overflow:hidden;padding:10px 10px;width:25px;vertical-align:bottom;text-shadow:1px 2px 3px #111}
.item ul li a:hover {width:130px}
.item ul li a:hover span {opacity:1}
.item ul li a span {transition:opacity 1s;-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-ms-transition:opacity 1s;-o-transition:opacity 1s;display:inline-block;overflow:hidden;opacity:0;text-align:left;width:130px}
a.menu1 {background:#FF8C00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJ6sICL1I7w6n2Uhma08ssVH_6H7fkmZjUbHruvyyOiyS8CQWMyh9c0v-c6EgVq8AIg6FvaIlfQRHjDtdf0H9TxCpPXLcMgJ_1X1etMGAKeHtMNTZVLmXPFV8L_4QlnDolpoHwyAEzFc/s47/kode1.png) no-repeat right center}
a.menu2 {background:#39f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic_r8EDnJ_jF4ML3ALvuBkalD69viwV4XKGjjytR-DMT0fKfVrLcXm5qnyb2QCfF79CuSqpGsmZpC81mTwB-1cWup2PHAKZqM2FK88OlS_Y_auDljIxD8brrLlUOF6T628ew1g-RtYb4M/s47/kode2.png) no-repeat right center}
a.menu3 {background:#8B008B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9HBqT_QdEr046vTpGQEFyZnLmZU-01bXYKHK4cI-Dxna0v9CvKN_KcopmTcH2HVe8JyZrD-cVxkh2aq5TwhlnxfO_plHmmbMwxd3puC1WbugptcOpyMKkNJfAc4eXbp6loJdsbvUh5NA/s47/kode3.png) no-repeat right center}
a.menu4 {background:#FF1493 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMLQ6XyCy2JWZZo7IzuJo4WhkNnCihF3qFxy8sgbJHrPM5UCVciSY2VaCTcL7nCEZ_F0yAL2DIGk1BRB1mMHcYIRg7CJpVh5ODi2f369vKxD0TnUazkn5eVHS0uRDDfdjknqfMCHlZslg/s47/kode4.png) no-repeat right center}
a.menu5 {background:blue url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMSlCog_hyphenhyphen6H7Y49RKrF0vTv3xh0Sc1DQV6iknbV586K77iH5PoGsUXFj1-M77gmzW4jYXnWSDUFBA1HZZw_nPnQXqpRnTnyhAps_djkVD1daW7MG6t-bACVVrHlGjDZMQ_kpA6an-1PTE/w45-h47-no/) no-repeat right center}
</style><br />
<body>
<div class="item">
<ul><li>
<a class="menu1" href="#"><span>Lihat »</span></a></li>
<li><a class="menu2" href="#"><span>Lihat »</span></a></li>
<li><a class="menu3" href="#"><span>Lihat »</span></a></li>
<li><a class="menu4" href="#"><span>Lihat »</span></a></li>
<li><a class="menu5" href="#"><span>Lihat »</span></a></li>
</ul></div>
</body>
</html>
0 komentar:
Posting Komentar