Silahkan Kunjungi rumah blog kami yang baru klik DISINI
untuk fotonya silahkan anda koment sendiri....ha...ha....

Rabu, 07 Januari 2015

Membuat Menu Bubles

print this page Print this page







Kode yang digunakan adalah :
<html>
<head>
<style type="text/css">
#pad {height:100px;}

#menuContainer {padding:0; margin:0; list-style:none; width:448px; height:64px; position:relative; float:right; margin-right:50px;}

#menu {padding:0; margin:0; list-style:none; width:448px; height:64px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDhYjt92gRk-vrFGmsD5IZfEFdt4aBprtCvhBmb9XScvwU5DHkYzaRxA1-3i-fIj4tuyzLnWW041oXRl7EQeSSxPEHVFKuEZ5jC7NZeE1igKazaMF6zA8VB0p388gn8zXtZ1lp0GBHpyIg/w448-h64-no/toolbar.png);}
* html #menu {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDhYjt92gRk-vrFGmsD5IZfEFdt4aBprtCvhBmb9XScvwU5DHkYzaRxA1-3i-fIj4tuyzLnWW041oXRl7EQeSSxPEHVFKuEZ5jC7NZeE1igKazaMF6zA8VB0p388gn8zXtZ1lp0GBHpyIg/w448-h64-no/toolbar.png', sizingMethod='scale');
}

#menu li {float:left; width:64px; height:64px; position:relative;}
#menu li a {display:block; width:64px; height:64px;}
#menu li a b {position:absolute; left:-9999px;}

#menu li a:hover {white-space:nowrap;}
#menu li a:hover b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;}

.home #menu li#home a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivp3yrhtE2gXpbte-YCUy5QeYuS-2EJu1xRPrnYMIEZP0WAv2sCsMcPW4ZJ4dwLD3cQS4mr06qkH39uBPFe7S2s4udykbeSVuaKM8Q2KhDyF7ohOhHmxlq7VC77CdPxr5SxC5UAZDITnF6/s64-no/bhome.png);}
.single #menu li#single a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTvjooduQocm3YBViNHWrH1vh7fqhECIAh3oS99M2XZAdxUT23lBwyGr6EW3h7HqPYv_rUOrMcEWotFrAqI3uKQF7o6VIG03ArflEdgkhaoU470m12ey-1u7B-i5Ndo5ez58CKrTUWv82O/s64-no/bsingle.png);}
.dropdown #menu li#dropdown a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtd_iSJN-H0yxvgFF8HMP7hMtGh9GIFNgKjcfQQHve1LrwfNlWUeI3D_E8JE8h4t8VKRttXu_t8SVZi2pXdIjHxvXJC3JQAOGsfMIakWrmqeS5Gj8chV0xKJzgAK-JUxPjdETtigyczAID/s64-no/bdropdown.png);}
.dropline #menu li#dropline a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPynRp2C242ItB6UbmquKZgPF2oLi6DFMgacd2ysWzf_QAjUMAKlQTsiq_6J4_P1QUTSWvdJPBjmdmhYRmMW8Gb5-K-caf0nAlt6c_idvhs5lMRQ-autUf47aux2c06AnQIz7qAwtlDWlb/s64-no/bdropline.png);}
.flyout #menu li#flyout a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-7S9rxcWQHCe-p_9Hxa-0b3HKFmMT_1N2QEhAjRADxV9xqcUBrQuSbawH_RahqAjGK7EGWKgmFmulE6dDdToRZKasW7Wli2ibIvvaQ7QKMxmv_53su-xcJqjddCBhxq7VtaXMLGr8I7EU/s64-no/bflyout.png);}
.support #menu li#support a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNmGCmqmcvYB2ArvoQAlayiHYnLdQy8q8USSrv_7FefxVvN36gPPB-Sz9OJ5QANNWjPNqaMbWTZUS6OYhUe8DBxj5d68bNyOTaphDHdUIuyghGzI7dwY-stJGL7zayldqPAV5XSeE8fAaM/s64-no/bsupport.png);}
.contact #menu li#contact a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxoK478SyApf2_gESQ04OYZdW23maTHxue5yiR0n2kzPLU1mJ-fsTPqIN27M0QF2qyKZUK3z9XPiGDDQA0CD6RQt91XqG8X3WzNlhSDPc_UABv_aI-gz8nSeyQS0CSkX3VhllooZGV4yF/s64-no/bcontact.png);}


#menu li#home a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivp3yrhtE2gXpbte-YCUy5QeYuS-2EJu1xRPrnYMIEZP0WAv2sCsMcPW4ZJ4dwLD3cQS4mr06qkH39uBPFe7S2s4udykbeSVuaKM8Q2KhDyF7ohOhHmxlq7VC77CdPxr5SxC5UAZDITnF6/s64-no/bhome.png);}
#menu li#single a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTvjooduQocm3YBViNHWrH1vh7fqhECIAh3oS99M2XZAdxUT23lBwyGr6EW3h7HqPYv_rUOrMcEWotFrAqI3uKQF7o6VIG03ArflEdgkhaoU470m12ey-1u7B-i5Ndo5ez58CKrTUWv82O/s64-no/bsingle.png);}
#menu li#dropdown a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtd_iSJN-H0yxvgFF8HMP7hMtGh9GIFNgKjcfQQHve1LrwfNlWUeI3D_E8JE8h4t8VKRttXu_t8SVZi2pXdIjHxvXJC3JQAOGsfMIakWrmqeS5Gj8chV0xKJzgAK-JUxPjdETtigyczAID/s64-no/bdropdown.png);}
#menu li#dropline a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPynRp2C242ItB6UbmquKZgPF2oLi6DFMgacd2ysWzf_QAjUMAKlQTsiq_6J4_P1QUTSWvdJPBjmdmhYRmMW8Gb5-K-caf0nAlt6c_idvhs5lMRQ-autUf47aux2c06AnQIz7qAwtlDWlb/s64-no/bdropline.png);}
#menu li#flyout a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-7S9rxcWQHCe-p_9Hxa-0b3HKFmMT_1N2QEhAjRADxV9xqcUBrQuSbawH_RahqAjGK7EGWKgmFmulE6dDdToRZKasW7Wli2ibIvvaQ7QKMxmv_53su-xcJqjddCBhxq7VtaXMLGr8I7EU/s64-no/bflyout.png);}
#menu li#support a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNmGCmqmcvYB2ArvoQAlayiHYnLdQy8q8USSrv_7FefxVvN36gPPB-Sz9OJ5QANNWjPNqaMbWTZUS6OYhUe8DBxj5d68bNyOTaphDHdUIuyghGzI7dwY-stJGL7zayldqPAV5XSeE8fAaM/s64-no/bsupport.png);}
#menu li#contact a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxoK478SyApf2_gESQ04OYZdW23maTHxue5yiR0n2kzPLU1mJ-fsTPqIN27M0QF2qyKZUK3z9XPiGDDQA0CD6RQt91XqG8X3WzNlhSDPc_UABv_aI-gz8nSeyQS0CSkX3VhllooZGV4yF/s64-no/bcontact.png);}

* html #menu li#home a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivp3yrhtE2gXpbte-YCUy5QeYuS-2EJu1xRPrnYMIEZP0WAv2sCsMcPW4ZJ4dwLD3cQS4mr06qkH39uBPFe7S2s4udykbeSVuaKM8Q2KhDyF7ohOhHmxlq7VC77CdPxr5SxC5UAZDITnF6/s64-no/bhome.png', sizingMethod='scale');
}
* html #menu li#single a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTvjooduQocm3YBViNHWrH1vh7fqhECIAh3oS99M2XZAdxUT23lBwyGr6EW3h7HqPYv_rUOrMcEWotFrAqI3uKQF7o6VIG03ArflEdgkhaoU470m12ey-1u7B-i5Ndo5ez58CKrTUWv82O/s64-no/bsingle.png', sizingMethod='scale');
}
* html #menu li#dropdown a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtd_iSJN-H0yxvgFF8HMP7hMtGh9GIFNgKjcfQQHve1LrwfNlWUeI3D_E8JE8h4t8VKRttXu_t8SVZi2pXdIjHxvXJC3JQAOGsfMIakWrmqeS5Gj8chV0xKJzgAK-JUxPjdETtigyczAID/s64-no/bdropdown.png', sizingMethod='scale');
}
* html #menu li#dropline a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPynRp2C242ItB6UbmquKZgPF2oLi6DFMgacd2ysWzf_QAjUMAKlQTsiq_6J4_P1QUTSWvdJPBjmdmhYRmMW8Gb5-K-caf0nAlt6c_idvhs5lMRQ-autUf47aux2c06AnQIz7qAwtlDWlb/s64-no/bdropline.png', sizingMethod='scale');
}
* html #menu li#flyout a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-7S9rxcWQHCe-p_9Hxa-0b3HKFmMT_1N2QEhAjRADxV9xqcUBrQuSbawH_RahqAjGK7EGWKgmFmulE6dDdToRZKasW7Wli2ibIvvaQ7QKMxmv_53su-xcJqjddCBhxq7VtaXMLGr8I7EU/s64-no/bflyout.png', sizingMethod='scale');
}
* html #menu li#support a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNmGCmqmcvYB2ArvoQAlayiHYnLdQy8q8USSrv_7FefxVvN36gPPB-Sz9OJ5QANNWjPNqaMbWTZUS6OYhUe8DBxj5d68bNyOTaphDHdUIuyghGzI7dwY-stJGL7zayldqPAV5XSeE8fAaM/s64-no/bsupport.png', sizingMethod='scale');
}
* html #menu li#contact a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxoK478SyApf2_gESQ04OYZdW23maTHxue5yiR0n2kzPLU1mJ-fsTPqIN27M0QF2qyKZUK3z9XPiGDDQA0CD6RQt91XqG8X3WzNlhSDPc_UABv_aI-gz8nSeyQS0CSkX3VhllooZGV4yF/s64-no/bcontact.png', sizingMethod='scale');
}

* html .home #menu li#home a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivp3yrhtE2gXpbte-YCUy5QeYuS-2EJu1xRPrnYMIEZP0WAv2sCsMcPW4ZJ4dwLD3cQS4mr06qkH39uBPFe7S2s4udykbeSVuaKM8Q2KhDyF7ohOhHmxlq7VC77CdPxr5SxC5UAZDITnF6/s64-no/bhome.png', sizingMethod='scale');
}
* html .single #menu li#single a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTvjooduQocm3YBViNHWrH1vh7fqhECIAh3oS99M2XZAdxUT23lBwyGr6EW3h7HqPYv_rUOrMcEWotFrAqI3uKQF7o6VIG03ArflEdgkhaoU470m12ey-1u7B-i5Ndo5ez58CKrTUWv82O/s64-no/bsingle.png', sizingMethod='scale');
}
* html .dropline #menu li#dropdown a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtd_iSJN-H0yxvgFF8HMP7hMtGh9GIFNgKjcfQQHve1LrwfNlWUeI3D_E8JE8h4t8VKRttXu_t8SVZi2pXdIjHxvXJC3JQAOGsfMIakWrmqeS5Gj8chV0xKJzgAK-JUxPjdETtigyczAID/s64-no/bdropdown.png', sizingMethod='scale');
}
* html .dropline #menu li#dropline a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPynRp2C242ItB6UbmquKZgPF2oLi6DFMgacd2ysWzf_QAjUMAKlQTsiq_6J4_P1QUTSWvdJPBjmdmhYRmMW8Gb5-K-caf0nAlt6c_idvhs5lMRQ-autUf47aux2c06AnQIz7qAwtlDWlb/s64-no/bdropline.png', sizingMethod='scale');
}
* html .flyout #menu li#flyout a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-7S9rxcWQHCe-p_9Hxa-0b3HKFmMT_1N2QEhAjRADxV9xqcUBrQuSbawH_RahqAjGK7EGWKgmFmulE6dDdToRZKasW7Wli2ibIvvaQ7QKMxmv_53su-xcJqjddCBhxq7VtaXMLGr8I7EU/s64-no/bflyout.png', sizingMethod='scale');
}
* html .support #menu li#support a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNmGCmqmcvYB2ArvoQAlayiHYnLdQy8q8USSrv_7FefxVvN36gPPB-Sz9OJ5QANNWjPNqaMbWTZUS6OYhUe8DBxj5d68bNyOTaphDHdUIuyghGzI7dwY-stJGL7zayldqPAV5XSeE8fAaM/s64-no/bsupport.png', sizingMethod='scale');
}
* html .contact #menu li#contact a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxoK478SyApf2_gESQ04OYZdW23maTHxue5yiR0n2kzPLU1mJ-fsTPqIN27M0QF2qyKZUK3z9XPiGDDQA0CD6RQt91XqG8X3WzNlhSDPc_UABv_aI-gz8nSeyQS0CSkX3VhllooZGV4yF/s64-no/bcontact.png', sizingMethod='scale');
}

</style>
</head>
<body>
    <div id="menuContainer">
        <ul id="menu">
            <li id="home" class="first"><a href="index.html"><b>Home</b></a></li>
            <li id="single"><a href="single.html"><b>Single Level</b></a></li>
            <li id="dropdown"><a href="dropdown.html"><b>Dropdown</b></a></li>
            <li id="dropline"><a href="dropline.html"><b>Dropline</b></a></li>
            <li id="flyout"><a href="flyout.html"><b>Flyout</b></a></li>
            <li id="support"><a href="support.html"><b>Support</b></a></li>
            <li id="contact" class="last"><a href="contact.html"><b>Contact</b></a></li>
        </ul>
    </div>
</body>
</html>
Artikel Terkait

A M A R A J E N

Diposting oleh di 22.45
Label:

0   komentar

Posting Komentar

Cancel Reply
Langganan: Posting Komentar ( Atom )
A M A R A J E N
Blog ini didirikan hanya untuk kalangan sendiri, Terima kasih telah singgah.. Semoga kita berjumpa kembali.....!