Blog ini didirikan hanya untuk kalangan sendiri, Terima kasih telah singgah.. Semoga kita berjumpa kembali....!!
Home » » Membuat Menu Single Balloon

Membuat Menu Single Balloon

Written By jendoang on Senin, 05 Januari 2015 | 23.05

print this page Print this page















Untuk membuat menu balon seperti di atas, kodenya seperti berikut :
<html>
<head>
<style type="text/css">
#menu {padding:0; margin:0; list-style:none; width:546px; height:180px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtPhPUKIjSlCQSB6VOy-U3ncLvpc6BpssxiYJ3BGhhqAqhqJZAZp2Godt4BzvsfLQZVpl7rKFMpibVe0v_lLeHKTdH0YB4g2S4kdLg8b75e9NuRknaWTfa1EGYhql7fpljvbdmf_A4Qa3/w546-h180-no/bw.jpg); position:relative; float:right;}
#menu li {float:left;}
#menu li a {display:block; width:78px; height:100px; background:transparent;}
#menu li a b {position:absolute; left:-9999px;}

#menu li#home,
#menu li#dropdown,
#menu li#flyout,
#menu li#contact
{margin-top:23px;}
#menu li#single,
#menu li#dropline,
#menu li#support
{margin-top:3px;}

#menu li#home a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk5POf1TZaiCzK_XFw4a_KslbGbhdXjHEIivPltEocsVQnpuucfQKRuBDzV36a8Tg3oskEAwhtK9ydfphNIzT_Mxzq-0XHuxfG0T16f0uh3NQHDKY1hRp4ULJraMRK895i5xO2aSt64aPs/w546-h180-no/color.jpg) 0 -23px;}
#menu li#single a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk5POf1TZaiCzK_XFw4a_KslbGbhdXjHEIivPltEocsVQnpuucfQKRuBDzV36a8Tg3oskEAwhtK9ydfphNIzT_Mxzq-0XHuxfG0T16f0uh3NQHDKY1hRp4ULJraMRK895i5xO2aSt64aPs/w546-h180-no/color.jpg) -78px -3px;}
#menu li#dropdown a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk5POf1TZaiCzK_XFw4a_KslbGbhdXjHEIivPltEocsVQnpuucfQKRuBDzV36a8Tg3oskEAwhtK9ydfphNIzT_Mxzq-0XHuxfG0T16f0uh3NQHDKY1hRp4ULJraMRK895i5xO2aSt64aPs/w546-h180-no/color.jpg) -156px -23px;}
#menu li#dropline a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk5POf1TZaiCzK_XFw4a_KslbGbhdXjHEIivPltEocsVQnpuucfQKRuBDzV36a8Tg3oskEAwhtK9ydfphNIzT_Mxzq-0XHuxfG0T16f0uh3NQHDKY1hRp4ULJraMRK895i5xO2aSt64aPs/w546-h180-no/color.jpg) -234px -3px;}
#menu li#flyout a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk5POf1TZaiCzK_XFw4a_KslbGbhdXjHEIivPltEocsVQnpuucfQKRuBDzV36a8Tg3oskEAwhtK9ydfphNIzT_Mxzq-0XHuxfG0T16f0uh3NQHDKY1hRp4ULJraMRK895i5xO2aSt64aPs/w546-h180-no/color.jpg) -312px -23px;}
#menu li#support a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk5POf1TZaiCzK_XFw4a_KslbGbhdXjHEIivPltEocsVQnpuucfQKRuBDzV36a8Tg3oskEAwhtK9ydfphNIzT_Mxzq-0XHuxfG0T16f0uh3NQHDKY1hRp4ULJraMRK895i5xO2aSt64aPs/w546-h180-no/color.jpg) -390px -3px;}
#menu li#contact a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk5POf1TZaiCzK_XFw4a_KslbGbhdXjHEIivPltEocsVQnpuucfQKRuBDzV36a8Tg3oskEAwhtK9ydfphNIzT_Mxzq-0XHuxfG0T16f0uh3NQHDKY1hRp4ULJraMRK895i5xO2aSt64aPs/w546-h180-no/color.jpg) -468px -23px;}

.home #menu li#home a, .home #menu li#home a:hover, #menu li#home a:active, #menu li#home a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFs_O40VjqnHykSydUmIFrvFLS4zmExueYudKXeeXvUtw5gylxkpTBiQI7vrANF6FZeSyhEGtEDMykbS3fkiyCKMxEfAsAjaRYq1vXL8Q6pMF1yjC6uRCk7O9_bEDpy909aSTyN1aksMF/w546-h180-no/white.jpg) 0 -23px;}
.single #menu li#single a, .single #menu li#single a:hover, #menu li#single a:active, #menu li#single a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFs_O40VjqnHykSydUmIFrvFLS4zmExueYudKXeeXvUtw5gylxkpTBiQI7vrANF6FZeSyhEGtEDMykbS3fkiyCKMxEfAsAjaRYq1vXL8Q6pMF1yjC6uRCk7O9_bEDpy909aSTyN1aksMF/w546-h180-no/white.jpg) -78px -3px;}
.dropdown #menu li#dropdown a, .dropdown #menu li#dropdown a:hover, #menu li#dropdown a:active, #menu li#dropdown a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFs_O40VjqnHykSydUmIFrvFLS4zmExueYudKXeeXvUtw5gylxkpTBiQI7vrANF6FZeSyhEGtEDMykbS3fkiyCKMxEfAsAjaRYq1vXL8Q6pMF1yjC6uRCk7O9_bEDpy909aSTyN1aksMF/w546-h180-no/white.jpg) -156px -23px;}
.dropline #menu li#dropline a, .dropline #menu li#dropline a:hover, #menu li#dropline a:active, #menu li#dropline a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFs_O40VjqnHykSydUmIFrvFLS4zmExueYudKXeeXvUtw5gylxkpTBiQI7vrANF6FZeSyhEGtEDMykbS3fkiyCKMxEfAsAjaRYq1vXL8Q6pMF1yjC6uRCk7O9_bEDpy909aSTyN1aksMF/w546-h180-no/white.jpg) -234px -3px;}
.flyout #menu li#flyout a, .flyout #menu li#flyout a:hover, #menu li#flyout a:active, #menu li#flyout a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFs_O40VjqnHykSydUmIFrvFLS4zmExueYudKXeeXvUtw5gylxkpTBiQI7vrANF6FZeSyhEGtEDMykbS3fkiyCKMxEfAsAjaRYq1vXL8Q6pMF1yjC6uRCk7O9_bEDpy909aSTyN1aksMF/w546-h180-no/white.jpg) -312px -23px;}
.support #menu li#support a, .support #menu li#support a:hover, #menu li#support a:active, #menu li#support a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFs_O40VjqnHykSydUmIFrvFLS4zmExueYudKXeeXvUtw5gylxkpTBiQI7vrANF6FZeSyhEGtEDMykbS3fkiyCKMxEfAsAjaRYq1vXL8Q6pMF1yjC6uRCk7O9_bEDpy909aSTyN1aksMF/w546-h180-no/white.jpg) -390px -3px;}
.contact #menu li#contact a, .contact #menu li#contact a:hover, #menu li#contact a:active, #menu li#contact a:focus {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFs_O40VjqnHykSydUmIFrvFLS4zmExueYudKXeeXvUtw5gylxkpTBiQI7vrANF6FZeSyhEGtEDMykbS3fkiyCKMxEfAsAjaRYq1vXL8Q6pMF1yjC6uRCk7O9_bEDpy909aSTyN1aksMF/w546-h180-no/white.jpg) -468px -23px;}
</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>
Share this article :

0 komentar:

Posting Komentar

 
Support : Johny Terwuss
Copyright © 2017. Jen Doang - All Rights Reserved
Created by Johny Wusss Modify by Jendoang
Proudly Powered by Blogger