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

Membuat Menu Rainbow

Written By jendoang on Rabu, 07 Januari 2015 | 21.32

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/AVvXsEjAaoNZr6lPDNnhOkddgqo25yveetOcoDv1shg0EF3edDhMPpGzr215JNAIbHyz1itj04oslJJQUz8uHeUcC5dfpl4zHPfHuy9XCfGuGaZShVc3K0WOZM-Hda0oYaQz5hC-ozCzr8l39mqM/w96-h146-no/red-off.png);}
#menu li#single a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtCRxv6EJHAGDAv78hWKA3B8mJoYZZrmYbHfm5vYTrRJ_nZ1OF31CFMF1uEwkycpK_cTfxueXxkc92okq-2zaGkTyhjEs18lewCqNo4fk2HsypyiZSejJHXRoRi9pbqoKYK7WrXWJTrgMh/w96-h146-no/orange-off.png);}
#menu li#dropdown a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVV4nxtRn-8RcO4Jc1_hBFRMhfR5Z124SvNIdgYSp65Yi8dk2rJb5XvVvxI6FpSsGrlniU_UWyRXq8jV_xB4IdDBlGRHILwrvMCdNM1Uuin4yflo2lXYm044cVm__aoiRyC6zAdNbPu_9J/w96-h146-no/yellow-off.png);}
#menu li#dropline a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8b68cpnOto6mLv61G18fYtqRR8ckZRHeN635X9XkWope4RIBGs5zw7_NMbtTuNmcKZmDUWc9E70KjKXji45gc-gJz2m1SO6WGluy9P4ZToS3QQB2ktt8kHQd7dzU_HVdEu5vSudL7Ms5V/w96-h146-no/green-off.png);}
#menu li#flyout a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxCccdpY1pZAJz-mwRl_NJrivEliQNCKM1e8XS409TF4pH1qw2iZqEFxhkO-TLEugII9z2uJAXCats8fxXBkAOxuFTF7xRL4y2fx4Lq6rCgtpaMB_0bzMSKSIce7OyUtSMf_dvFyiM4DK3/w96-h146-no/blue-off.png);}
#menu li#support a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOX7bl1YR-n75gPutglyFEcgwZikQzp4T6g84hl8mUfRf-iLYx7ROJrVKK5p_2mk2SEmsi5vF0KHvaHasOVFgncqr26bZv_6XrcYNRPueU6dMC8sMX8F_PbcpxLwsIvPGIU5SNvAVMbxQ-/w96-h146-no/indigo-off.png);}
#menu li#contact a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjK2kiM-MXF2fJOAFenSviRNyxy7JIXQCtedInraxixPn8dwkGsntJDpL0xH32tK7jNBQi71qUsYG7FdgaWHBvv3IxzOA_1dcg2sjkuGQVKbRYTWGDWQyq68l4IzefWc6WXTAtQ5lTkbBQ/w96-h146-no/violet-off.png);}

#menu li#home a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvijIioYQ8A79fipkXekTzPHjDZY6iw7Ca3tB9aCbi6dk6KJIn4bVaty18wbdVWABeHdFDdvMOvV3xgDLviUA2kTDTuvkzcbWd7uKK2_R82Zv0Cd1nSy1QS_8_byp_88KoCl8tCCZ1uj91/w96-h146-no/red-on.png);}
#menu li#single a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqQcKTEY25Tm5ij1J_7hwa6iPmByu21SKSHvUxhK_xcBKKXLA7lcGTmbIyJF9Otj3rJftpdUkMdEqqG6uzedj5bUkt2e91u4VwBYrc84tNkqLBJQZfd08EY80fSScz1-QRQVmE7ZR9mhIX/w96-h146-no/orange-on.png);}
#menu li#dropdown a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4dlaezMntTp7P4UyeZo4uS-ta9vcjdxswmmRchVfI8YifHlnOTP2dSe4dJTWXG5fDwB1HmHx4vvNiycHNuufdqXGJXJrOR8oZ4Ry3o6ygoVanLFuG-r-267RILEI2UocmalMiOJjUP9kV/w96-h146-no/yellow-on.png);}
#menu li#dropline a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7QANUchc_UnJW02ykv6cEULyS7s0syA61foeGnXyN8Qw3GJw-Dk8rYe_xuD_bVBrlZqRd5tfilba-mKAguj3udaQqlvjRdq4NvEVOspZemymF9ZDgzh7eK4ecA4nQ6YzRdXJ14LLlwH6s/w96-h146-no/green-on.png);}
#menu li#flyout a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQO9Hwmmn2CTA4WJnZ65cyyQ6Zla4wh0QbnoxlAkGuxPb2Hq96_EnRqbMUZMRRlQ5KL3pMcNI1SxP12VpKvK8AJ6XmmErQp7_LFJJZYzPeICjOkWw-UkGGbrs3Nupyi-9RRNQDXCjTq59n/w96-h146-no/blue-on.png);}
#menu li#support a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYRXH0jx70VdHoabLVv5dC9EKs5rtJdaNi-xvmuGFblaPkLN9SsClTxDoS5-R5bXEIYBmAlpaVlHUfCIsGf6xAsRkxTgOVY-sYlsvaQ_YP-3YmpArvXex2job2NUycA2dBqjQ8Av9FjHm3/w96-h146-no/indigo-on.png);}
#menu li#contact a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfNwoMrHJ_6KZieA9-VcWahSp8V0gPqN3gzCrx3gxSiHFucPsUz7MQhNgveo_UVQnDWW-jwYo1BBdCq-tbRlVO-Xia_t3W3nk3rQKgENkP8iglBwSK1mj2sOysGUAGn7YndMrTtr0oryk-/w96-h146-no/violet-on.png);}

.home #menu li#home a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvijIioYQ8A79fipkXekTzPHjDZY6iw7Ca3tB9aCbi6dk6KJIn4bVaty18wbdVWABeHdFDdvMOvV3xgDLviUA2kTDTuvkzcbWd7uKK2_R82Zv0Cd1nSy1QS_8_byp_88KoCl8tCCZ1uj91/w96-h146-no/red-on.png);}
.single #menu li#single a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqQcKTEY25Tm5ij1J_7hwa6iPmByu21SKSHvUxhK_xcBKKXLA7lcGTmbIyJF9Otj3rJftpdUkMdEqqG6uzedj5bUkt2e91u4VwBYrc84tNkqLBJQZfd08EY80fSScz1-QRQVmE7ZR9mhIX/w96-h146-no/orange-on.png);}
.dropdown #menu li#dropdown a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4dlaezMntTp7P4UyeZo4uS-ta9vcjdxswmmRchVfI8YifHlnOTP2dSe4dJTWXG5fDwB1HmHx4vvNiycHNuufdqXGJXJrOR8oZ4Ry3o6ygoVanLFuG-r-267RILEI2UocmalMiOJjUP9kV/w96-h146-no/yellow-on.png);}
.dropline #menu li#dropline a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7QANUchc_UnJW02ykv6cEULyS7s0syA61foeGnXyN8Qw3GJw-Dk8rYe_xuD_bVBrlZqRd5tfilba-mKAguj3udaQqlvjRdq4NvEVOspZemymF9ZDgzh7eK4ecA4nQ6YzRdXJ14LLlwH6s/w96-h146-no/green-on.png);}
.flyout #menu li#flyout a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQO9Hwmmn2CTA4WJnZ65cyyQ6Zla4wh0QbnoxlAkGuxPb2Hq96_EnRqbMUZMRRlQ5KL3pMcNI1SxP12VpKvK8AJ6XmmErQp7_LFJJZYzPeICjOkWw-UkGGbrs3Nupyi-9RRNQDXCjTq59n/w96-h146-no/blue-on.png);}
.support #menu li#support a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYRXH0jx70VdHoabLVv5dC9EKs5rtJdaNi-xvmuGFblaPkLN9SsClTxDoS5-R5bXEIYBmAlpaVlHUfCIsGf6xAsRkxTgOVY-sYlsvaQ_YP-3YmpArvXex2job2NUycA2dBqjQ8Av9FjHm3/w96-h146-no/indigo-on.png);}
.contact #menu li#contact a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfNwoMrHJ_6KZieA9-VcWahSp8V0gPqN3gzCrx3gxSiHFucPsUz7MQhNgveo_UVQnDWW-jwYo1BBdCq-tbRlVO-Xia_t3W3nk3rQKgENkP8iglBwSK1mj2sOysGUAGn7YndMrTtr0oryk-/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>
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