Membuat Menu Bubles

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/AVvXsEjz4iAd0rAj9y7nUFwWZYWlVFuLGbf2vceqKdo0_PS3lZWentM4oWFoCTZr6lkYMEgz2BI_0oHbCe6ZqsSSYBBqSzLeg1wn-LJgKHr-K_Mh_TY14nOtqSqgG177IfM0w6PWS1yDEBLT2upN/w448-h64-no/toolbar.png);}
* html #menu {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4iAd0rAj9y7nUFwWZYWlVFuLGbf2vceqKdo0_PS3lZWentM4oWFoCTZr6lkYMEgz2BI_0oHbCe6ZqsSSYBBqSzLeg1wn-LJgKHr-K_Mh_TY14nOtqSqgG177IfM0w6PWS1yDEBLT2upN/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/AVvXsEhJK3FjwO2EX9ApeMlxGwzVH2QRIUX3vx-YDzPY9wL2fL_2vv82lo9HvnCEQPU-xJuRxtWTuTrmP1rrvdRX93OgE6iR6rAoy8iC2AFoOCV0WTqcLnPeM5SgnKmVDNxt-MwfJGcDciicNxAA/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/AVvXsEiKXxJv3gEpdcs4MyMIn9HjOdtFvspg-u-5GxiTb2xFQGnDHlisDwP7jgqgEKVtr0x-n7_J8vzk1Gldr6huyMAaXmATdb7aapGW-UtKJxav_j06EC_2elDrIUUUgwzKDxX2mCuLnF66Sj2Y/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/AVvXsEhjUGcMX8clp61YntuxURmCbwrpAiZIJoMlCBjitpYiNlKCbnyOiexImgvwsMQ5eRyrND7geOXdjcgKryVCgdnu_IiJW_dZr5gNYNlkemplfCpNcRcvQNqPIVAkmAKLJZXyNISbCDPBF31m/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/AVvXsEjwqmiyQ7PymYK-0630lzEkTci2OmwrHZjvVFjtjNa08RIfz5mvuFpBjo7ogfMNJuUtJr6uDiOeCX1W-NLxuiizU9JuTqWq6164RspSw9MAsRx4NavVE7NsteJW29C7Yh2EhYw_xKKGMcoH/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/AVvXsEiJ2sAR2SRdNKcLz5-_xETftGJWaL-AlvXjF_gEi-QnBsZHmXzucRw0psszYzfgdvkIqj9l8aZue3qo0Mf1wj3JzXIu5_OBVzzVOQWMbzLgKj07yGgPRLpF7aPpe8ZO7_SkGJ1Ujh5lxMxn/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/AVvXsEiYlaD7V_OPapLnq8tkXLxvFFeifNpLJcxpnkRIE-hTivwnk8D-uayPaHL_fu2qaglEyNu0bkunFypdXJ4xnuyJPwEGkbFpdR0LqcyAgmmuHLDW_iISfKOCq4f8mAerP4IKjFJNKWAQfNZI/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/AVvXsEi90BhvYfDA_WvWwCNtOf21vzz7jMhm0iRRRcCvD0t0uRjuLBbfQgzTuMH7ei6zQvf9nhA3gAKx3BJeI2aDKppvRy3URgzMKdVyOYUy6Dk8JAOXE-U3mwqSj7R0V0oMj4_LrIYoIBv5nh9Y/s64-no/bcontact.png);}

#menu li#home a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJK3FjwO2EX9ApeMlxGwzVH2QRIUX3vx-YDzPY9wL2fL_2vv82lo9HvnCEQPU-xJuRxtWTuTrmP1rrvdRX93OgE6iR6rAoy8iC2AFoOCV0WTqcLnPeM5SgnKmVDNxt-MwfJGcDciicNxAA/s64-no/bhome.png);}
#menu li#single a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKXxJv3gEpdcs4MyMIn9HjOdtFvspg-u-5GxiTb2xFQGnDHlisDwP7jgqgEKVtr0x-n7_J8vzk1Gldr6huyMAaXmATdb7aapGW-UtKJxav_j06EC_2elDrIUUUgwzKDxX2mCuLnF66Sj2Y/s64-no/bsingle.png);}
#menu li#dropdown a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjUGcMX8clp61YntuxURmCbwrpAiZIJoMlCBjitpYiNlKCbnyOiexImgvwsMQ5eRyrND7geOXdjcgKryVCgdnu_IiJW_dZr5gNYNlkemplfCpNcRcvQNqPIVAkmAKLJZXyNISbCDPBF31m/s64-no/bdropdown.png);}
#menu li#dropline a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwqmiyQ7PymYK-0630lzEkTci2OmwrHZjvVFjtjNa08RIfz5mvuFpBjo7ogfMNJuUtJr6uDiOeCX1W-NLxuiizU9JuTqWq6164RspSw9MAsRx4NavVE7NsteJW29C7Yh2EhYw_xKKGMcoH/s64-no/bdropline.png);}
#menu li#flyout a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ2sAR2SRdNKcLz5-_xETftGJWaL-AlvXjF_gEi-QnBsZHmXzucRw0psszYzfgdvkIqj9l8aZue3qo0Mf1wj3JzXIu5_OBVzzVOQWMbzLgKj07yGgPRLpF7aPpe8ZO7_SkGJ1Ujh5lxMxn/s64-no/bflyout.png);}
#menu li#support a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlaD7V_OPapLnq8tkXLxvFFeifNpLJcxpnkRIE-hTivwnk8D-uayPaHL_fu2qaglEyNu0bkunFypdXJ4xnuyJPwEGkbFpdR0LqcyAgmmuHLDW_iISfKOCq4f8mAerP4IKjFJNKWAQfNZI/s64-no/bsupport.png);}
#menu li#contact a:hover b {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90BhvYfDA_WvWwCNtOf21vzz7jMhm0iRRRcCvD0t0uRjuLBbfQgzTuMH7ei6zQvf9nhA3gAKx3BJeI2aDKppvRy3URgzMKdVyOYUy6Dk8JAOXE-U3mwqSj7R0V0oMj4_LrIYoIBv5nh9Y/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/AVvXsEhJK3FjwO2EX9ApeMlxGwzVH2QRIUX3vx-YDzPY9wL2fL_2vv82lo9HvnCEQPU-xJuRxtWTuTrmP1rrvdRX93OgE6iR6rAoy8iC2AFoOCV0WTqcLnPeM5SgnKmVDNxt-MwfJGcDciicNxAA/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/AVvXsEiKXxJv3gEpdcs4MyMIn9HjOdtFvspg-u-5GxiTb2xFQGnDHlisDwP7jgqgEKVtr0x-n7_J8vzk1Gldr6huyMAaXmATdb7aapGW-UtKJxav_j06EC_2elDrIUUUgwzKDxX2mCuLnF66Sj2Y/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/AVvXsEhjUGcMX8clp61YntuxURmCbwrpAiZIJoMlCBjitpYiNlKCbnyOiexImgvwsMQ5eRyrND7geOXdjcgKryVCgdnu_IiJW_dZr5gNYNlkemplfCpNcRcvQNqPIVAkmAKLJZXyNISbCDPBF31m/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/AVvXsEjwqmiyQ7PymYK-0630lzEkTci2OmwrHZjvVFjtjNa08RIfz5mvuFpBjo7ogfMNJuUtJr6uDiOeCX1W-NLxuiizU9JuTqWq6164RspSw9MAsRx4NavVE7NsteJW29C7Yh2EhYw_xKKGMcoH/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/AVvXsEiJ2sAR2SRdNKcLz5-_xETftGJWaL-AlvXjF_gEi-QnBsZHmXzucRw0psszYzfgdvkIqj9l8aZue3qo0Mf1wj3JzXIu5_OBVzzVOQWMbzLgKj07yGgPRLpF7aPpe8ZO7_SkGJ1Ujh5lxMxn/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/AVvXsEiYlaD7V_OPapLnq8tkXLxvFFeifNpLJcxpnkRIE-hTivwnk8D-uayPaHL_fu2qaglEyNu0bkunFypdXJ4xnuyJPwEGkbFpdR0LqcyAgmmuHLDW_iISfKOCq4f8mAerP4IKjFJNKWAQfNZI/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/AVvXsEi90BhvYfDA_WvWwCNtOf21vzz7jMhm0iRRRcCvD0t0uRjuLBbfQgzTuMH7ei6zQvf9nhA3gAKx3BJeI2aDKppvRy3URgzMKdVyOYUy6Dk8JAOXE-U3mwqSj7R0V0oMj4_LrIYoIBv5nh9Y/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/AVvXsEhJK3FjwO2EX9ApeMlxGwzVH2QRIUX3vx-YDzPY9wL2fL_2vv82lo9HvnCEQPU-xJuRxtWTuTrmP1rrvdRX93OgE6iR6rAoy8iC2AFoOCV0WTqcLnPeM5SgnKmVDNxt-MwfJGcDciicNxAA/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/AVvXsEiKXxJv3gEpdcs4MyMIn9HjOdtFvspg-u-5GxiTb2xFQGnDHlisDwP7jgqgEKVtr0x-n7_J8vzk1Gldr6huyMAaXmATdb7aapGW-UtKJxav_j06EC_2elDrIUUUgwzKDxX2mCuLnF66Sj2Y/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/AVvXsEhjUGcMX8clp61YntuxURmCbwrpAiZIJoMlCBjitpYiNlKCbnyOiexImgvwsMQ5eRyrND7geOXdjcgKryVCgdnu_IiJW_dZr5gNYNlkemplfCpNcRcvQNqPIVAkmAKLJZXyNISbCDPBF31m/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/AVvXsEjwqmiyQ7PymYK-0630lzEkTci2OmwrHZjvVFjtjNa08RIfz5mvuFpBjo7ogfMNJuUtJr6uDiOeCX1W-NLxuiizU9JuTqWq6164RspSw9MAsRx4NavVE7NsteJW29C7Yh2EhYw_xKKGMcoH/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/AVvXsEiJ2sAR2SRdNKcLz5-_xETftGJWaL-AlvXjF_gEi-QnBsZHmXzucRw0psszYzfgdvkIqj9l8aZue3qo0Mf1wj3JzXIu5_OBVzzVOQWMbzLgKj07yGgPRLpF7aPpe8ZO7_SkGJ1Ujh5lxMxn/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/AVvXsEiYlaD7V_OPapLnq8tkXLxvFFeifNpLJcxpnkRIE-hTivwnk8D-uayPaHL_fu2qaglEyNu0bkunFypdXJ4xnuyJPwEGkbFpdR0LqcyAgmmuHLDW_iISfKOCq4f8mAerP4IKjFJNKWAQfNZI/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/AVvXsEi90BhvYfDA_WvWwCNtOf21vzz7jMhm0iRRRcCvD0t0uRjuLBbfQgzTuMH7ei6zQvf9nhA3gAKx3BJeI2aDKppvRy3URgzMKdVyOYUy6Dk8JAOXE-U3mwqSj7R0V0oMj4_LrIYoIBv5nh9Y/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>

Membuat Menu Bubles

Written By jendoang on Rabu, 07 Januari 2015 | 22.45

0 komentar:

Posting Komentar

Random Post

Popular Posts

Arsip

My Family

Album Keluarga