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

Rabu, 07 Januari 2015

Membuat Menu Rainbow

print this page Print this page



Untuk membuat Menu Rainbow cantik kodenya adalah :
  <html>
  <head>
  <style type="text/css">
  #pad {height:20px;}
#menu {padding:0; margin:0; list-style:none; width:700px; height:146px; float:left;}

#menu li {position:relative; float:left; margin:0 5px 0 0;}
#menu li.last {margin:0;}
#menu li a {display:block; height:146px; width:95px; line-height:20px; padding:0; float:left; color:#fff; text-decoration:none; font-family:"trebuchet MS", sans-serif; font-size:18px; text-align:center; cursor:pointer;}
#menu li a b {position:relative; top:28px; font-weight:normal;}

#menu li#home a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYqoVnhZ5oLxINVd0YDPkp3QXOg5sBvSxv1cN-f6PTSwBGRFP2dQwukKFi67jG3p6igltBUFKEFeQKVX-aG0NqYPKRHIyyk_-nYkTi8RN-lWtPvHNB2I09P5UK1-l3M7ALqG9N2ZCMweI_/w96-h146-no/red-off.png);}
#menu li#single a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDsimZhmq_9dTZflqNN11i7W8n2P25-Uw6FHA6Uk9gslkzZwD6pe_xVA3A9B24QE8c7iqbEeI6vRBkmIaiN6Ri1GXZlQB7xZVBWZ4F8k9n6ICvgU1y2kGNhe2y_q0qsynWqj47LZ4Z1qMS/w96-h146-no/orange-off.png);}
#menu li#dropdown a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8zgZh8hPh1PHU2lP589n6jC6cayoC8gcBN51AoPwVk1Bza68N8wGcqLBoe9KyCUxMI33qlDJeWpDgKpd09usFoP8IWtdIKbikUcIHRv-b-YUzwWK0ZEawhLKuMeCyvyn1Gk6RowyA-D6-/w96-h146-no/yellow-off.png);}
#menu li#dropline a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihKAyivakYtXMjV7ymh1r2J1r7GoPeOXbI1gB3_89TtIOdFF2F1r2JelYdLrnSOJREITcb28BSYTh38wIrLKQ_hyjAekPlV3rTj_93JDk_sQgQd1I2ZUI62ss6LEARMtmOUNpviQeCU4aj/w96-h146-no/green-off.png);}
#menu li#flyout a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9CP74G_xfxbN1gi7Dn09Fnt04wPuAFQzif6WYqr_iZvUOjtFlNa8OYs96d-9wY6IknPTfGGoQlhEPiEbOjtV3bgbSsiBRJx_LmYhWrOZ-MSjFsCePx1-FPhxqVclDLQoYFERclDcQ2gH/w96-h146-no/blue-off.png);}
#menu li#support a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwDo9rf4ILborL50B1VnfrzV-sxd2_pa9vYK5tuNEY5PgFTL4x6UnNZfwKFmmubQfNYNagHfOxYRNBZkQLsnuWumDtbBL8yAm2fkMULglJpxrNlrPxKONg0yMNQ7UbShG45baHeCuQiUbL/w96-h146-no/indigo-off.png);}
#menu li#contact a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVdr0kfkqC1BbvvDaK-wx1W4_xaKY0Xr05HUtLAZR6I5-helhg3xsSikhzkhS1b1fDnxolj8-3dykV34QivCfhrnVzrUZj0e-SnVqQE9f20MEb5Zcvz2axMwglu2dQ3ZTJYa0Ny08feIvA/w96-h146-no/violet-off.png);}

#menu li#home a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJj_4EG-76jRSvwimqfil17jzYZV0iitEExb_O2DqI3-Mtn3YzGkHUqntjD83jNlpl55x6RVrjFaCs6cheMiR8zrk-HqcNswUXOIW4osisxlsa8XaShEr3XmfQEidDY_YD5Lnn00DBroku/w96-h146-no/red-on.png);}
#menu li#single a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOo2qfb499g0Tqrz0d4IHRaZuTtjOqUO8UDzTiS3pgw1Kmui8rHY9nNZj3U4VSk4fXFoeZnsvrKQNeFeATTzypeRr1pj62_f4Y1NNWDOBp8g3uZcsZFryORXVTVZOGyd9A8NYUMhcGAaiT/w96-h146-no/orange-on.png);}
#menu li#dropdown a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzsR6QMjuaUzH1vh3QCb1kztGNTcEQTKycjW3-EK_NCHZ8MbMNexVykVgCX931jEjyifPNml6QRk1cpMv6AhIZ92wZsaejd0T0ftp0ZJd9bOdW40VFLbGYuTKBKY4kxn9_tPx7JNACqYG3/w96-h146-no/yellow-on.png);}
#menu li#dropline a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMG6Y_brBFDNSh83vBMNlp-33bGHjUS9sLpfGA_bRHMckZMr1tK889LJ55652ed6K7YIaBCHJ09VX3-ENCtUGNidL8_JqpebIhmgSF5r8DsvyJLEABmzcPafnan4c21mEFdn-0APT3Wr28/w96-h146-no/green-on.png);}
#menu li#flyout a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgv-n1oXFyT3Xa2T-lan5ne0PAa-G4Sksn8Teui8O6BI3L5obPyWpuvWTCmZSpsd2fDTvMGZw1V2F6JvzP5rmtLxh22DR0x_5ojC5wS6J3XIMm2MBPBhcrPpxyRssRUbrHFr3e_q0mKBPq/w96-h146-no/blue-on.png);}
#menu li#support a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj24dzMOAzV-1HpnXv5W0N9kifCL3pvAAZkxX1XuV1iph7GfvTxl71WE4GmC1AN3a40OVjEL_1k5xX334WThD1m0kinpi4tXswYkE9aHiHcQW1AUXMACPNzxxjmwiudaEy5IrQnRQViFWBJ/w96-h146-no/indigo-on.png);}
#menu li#contact a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK9k-49MOXYjkaKSYvKJVENHMMEmcZTHIT39t4ifqxOfs93fB4wL4oDHu4Y-2lkJ20E8GnPf6tgXfbe_t5LOWu92k7TRwOxdc2tsZu3fS4R9id9PtFp5zAhNmHHLkgIR2oDaJS3jbl0I6Z/w96-h146-no/violet-on.png);}

.home #menu li#home a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJj_4EG-76jRSvwimqfil17jzYZV0iitEExb_O2DqI3-Mtn3YzGkHUqntjD83jNlpl55x6RVrjFaCs6cheMiR8zrk-HqcNswUXOIW4osisxlsa8XaShEr3XmfQEidDY_YD5Lnn00DBroku/w96-h146-no/red-on.png);}
.single #menu li#single a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOo2qfb499g0Tqrz0d4IHRaZuTtjOqUO8UDzTiS3pgw1Kmui8rHY9nNZj3U4VSk4fXFoeZnsvrKQNeFeATTzypeRr1pj62_f4Y1NNWDOBp8g3uZcsZFryORXVTVZOGyd9A8NYUMhcGAaiT/w96-h146-no/orange-on.png);}
.dropdown #menu li#dropdown a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzsR6QMjuaUzH1vh3QCb1kztGNTcEQTKycjW3-EK_NCHZ8MbMNexVykVgCX931jEjyifPNml6QRk1cpMv6AhIZ92wZsaejd0T0ftp0ZJd9bOdW40VFLbGYuTKBKY4kxn9_tPx7JNACqYG3/w96-h146-no/yellow-on.png);}
.dropline #menu li#dropline a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMG6Y_brBFDNSh83vBMNlp-33bGHjUS9sLpfGA_bRHMckZMr1tK889LJ55652ed6K7YIaBCHJ09VX3-ENCtUGNidL8_JqpebIhmgSF5r8DsvyJLEABmzcPafnan4c21mEFdn-0APT3Wr28/w96-h146-no/green-on.png);}
.flyout #menu li#flyout a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgv-n1oXFyT3Xa2T-lan5ne0PAa-G4Sksn8Teui8O6BI3L5obPyWpuvWTCmZSpsd2fDTvMGZw1V2F6JvzP5rmtLxh22DR0x_5ojC5wS6J3XIMm2MBPBhcrPpxyRssRUbrHFr3e_q0mKBPq/w96-h146-no/blue-on.png);}
.support #menu li#support a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj24dzMOAzV-1HpnXv5W0N9kifCL3pvAAZkxX1XuV1iph7GfvTxl71WE4GmC1AN3a40OVjEL_1k5xX334WThD1m0kinpi4tXswYkE9aHiHcQW1AUXMACPNzxxjmwiudaEy5IrQnRQViFWBJ/w96-h146-no/indigo-on.png);}
.contact #menu li#contact a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK9k-49MOXYjkaKSYvKJVENHMMEmcZTHIT39t4ifqxOfs93fB4wL4oDHu4Y-2lkJ20E8GnPf6tgXfbe_t5LOWu92k7TRwOxdc2tsZu3fS4R9id9PtFp5zAhNmHHLkgIR2oDaJS3jbl0I6Z/w96-h146-no/violet-on.png);}

/* this is for IE6 png transparency fix - note the image path is from the .html file not the .css file */
* html #menu li#home a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/red-off.png', sizingMethod='scale');}
* html #menu li#single a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/orange-off.png', sizingMethod='scale');}
* html #menu li#dropdown a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/yellow-off.png', sizingMethod='scale');}
* html #menu li#dropline a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/green-off.png', sizingMethod='scale');}
* html #menu li#flyout a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/blue-off.png', sizingMethod='scale');}
* html #menu li#support a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/indigo-off.png', sizingMethod='scale');}
* html #menu li#contact a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/violet-off.png', sizingMethod='scale');}

* html #menu li#home a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/red-on.png', sizingMethod='scale');}
* html #menu li#single a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/orange-on.png', sizingMethod='scale');}
* html #menu li#dropdown a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/yellow-on.png', sizingMethod='scale');}
* html #menu li#dropline a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/green-on.png', sizingMethod='scale');}
* html #menu li#flyout a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/blue-on.png', sizingMethod='scale');}
* html #menu li#support a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/indigo-on.png', sizingMethod='scale');}
* html #menu li#contact a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/violet-on.png', sizingMethod='scale');}

* html .home #menu li#home a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/red-on.png', sizingMethod='scale');}
* html .single #menu li#single a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/orange-on.png', sizingMethod='scale');}
* html .dropdown #menu li#dropdown a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/yellow-on.png', sizingMethod='scale');}
* html .dropline #menu li#dropline a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/green-on.png', sizingMethod='scale');}
* html .flyout #menu li#flyout a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/blue-on.png', sizingMethod='scale');}
* html .support #menu li#support a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/indigo-on.png', sizingMethod='scale');}
* html .contact #menu li#contact a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_eleven/violet-on.png', sizingMethod='scale');}

  </style>
  </head>
  <body>
  <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>
  </body>
  </html>
Artikel Terkait

A M A R A J E N

Diposting oleh di 21.32
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.....!