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/AVvXsEiBJBSpYR4V57cbK1P9QPpc9fDpVlpxWxJf8S3WX9Mn_LC_Xk7AoRotyWw6K_Dz7Yi1lBKb-ixganQKMnOu7WFOzS9Qb7DH0fRcgvzTMjN7NFI63N0ejqzgp1-EDxXi3zPBfy-pN9tg6D0/s47/kode1.png) no-repeat right center}
a.menu2 {background:#39f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3kWSORGOzokTlL7cOc2Oh77uUEnbXDrWZOIS8i8V5yiDByn776Bw2iXvrqct-LsHPzflWU_YJM96R0-gxyMJUuETdoYY_Ozglb21QHKjJrQTqUZeHOyyD3EaVBXhPhJlhrVEfcFYjoS8/s47/kode2.png) no-repeat right center}
a.menu3 {background:#8B008B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEgry8YRilzIPt7Nq_CVoXY9L5hsF6FXOrjYL5PjbIKF35zE5IRfDFzSIgZCZ0OANs2Jau3FGdfXrewhYgQWjr7j8VjDktaz2UA7MdUnycY7qciLSaUfX5ycrMda83U12OBuW_LTLonY8/s47/kode3.png) no-repeat right center}
a.menu4 {background:#FF1493 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfYLt2aj2Bodg3WHLIGIohOjFaGLu7LHNghIfKfqra86vjv0D13pW3UiWxCUmWLO6qLDhKxFbeMvUaqtp9H32BaAvvm1evjisJaRd0w7AZ57oScr1pMmR73Gn24Q96mpawYIecfQztvuU/s47/kode4.png) no-repeat right center}
a.menu5 {background:blue url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5AOkaj9FbFRbpD2L5XJ-96yWau6IC4zGX6H3N_tMUUIdyDJEHLayA-Kqcc2U3h2nNM60S3n8lEHUfyH9COwmCJGgMtLRzo7oRDQNk-ZXWP_Kh5whbRuXcHjWST-3Uoll99O8wQ0jDVHcR/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/AVvXsEiBJBSpYR4V57cbK1P9QPpc9fDpVlpxWxJf8S3WX9Mn_LC_Xk7AoRotyWw6K_Dz7Yi1lBKb-ixganQKMnOu7WFOzS9Qb7DH0fRcgvzTMjN7NFI63N0ejqzgp1-EDxXi3zPBfy-pN9tg6D0/s47/kode1.png) no-repeat right center}
a.menu2 {background:#39f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3kWSORGOzokTlL7cOc2Oh77uUEnbXDrWZOIS8i8V5yiDByn776Bw2iXvrqct-LsHPzflWU_YJM96R0-gxyMJUuETdoYY_Ozglb21QHKjJrQTqUZeHOyyD3EaVBXhPhJlhrVEfcFYjoS8/s47/kode2.png) no-repeat right center}
a.menu3 {background:#8B008B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEgry8YRilzIPt7Nq_CVoXY9L5hsF6FXOrjYL5PjbIKF35zE5IRfDFzSIgZCZ0OANs2Jau3FGdfXrewhYgQWjr7j8VjDktaz2UA7MdUnycY7qciLSaUfX5ycrMda83U12OBuW_LTLonY8/s47/kode3.png) no-repeat right center}
a.menu4 {background:#FF1493 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfYLt2aj2Bodg3WHLIGIohOjFaGLu7LHNghIfKfqra86vjv0D13pW3UiWxCUmWLO6qLDhKxFbeMvUaqtp9H32BaAvvm1evjisJaRd0w7AZ57oScr1pMmR73Gn24Q96mpawYIecfQztvuU/s47/kode4.png) no-repeat right center}
a.menu5 {background:blue url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5AOkaj9FbFRbpD2L5XJ-96yWau6IC4zGX6H3N_tMUUIdyDJEHLayA-Kqcc2U3h2nNM60S3n8lEHUfyH9COwmCJGgMtLRzo7oRDQNk-ZXWP_Kh5whbRuXcHjWST-3Uoll99O8wQ0jDVHcR/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>
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar