Menu warna warni | Colorfull menu

Beberapa waktu lalu saya share menu dengan css3, Menu Dengan Bentuk Simple dan banyak yang lain lagi, nah menu yang sekarang akan saya share ini berbentuk warna - warni ya kayak pelangi, bentuk menu nya persis kayak yang ada pada gambar di atas, menunya nemu di web css tutorial barusan nih aku ngepos menu warna - warni hehehehe oh iya, menu ini juga udah aku tambahin efek Css3 yaitu efek transition, langsung aja ya liat demonya :

DEMO

Nah Abis liat demonya kalau ingin menggunakannya silahkan masuk di blog anda.

1. Klik Rancangan / Tata Letak
2. Pilih Menu HTML/Javascript
3. Masukan kode di bawah ini di kolom kedua

<div id="colormenu">
<span class="blue"><a href="#">internet</a></span>
<span class="red"><a href="#">learn how to</a></span>
<span class="green"><a href="#">newspaper</a></span>
<span class="yellow"><a href="#">twitter</a></span>
<span class="green2"><a href="#">rss feeds</a></span>
</div>
<style type="text/css">
#colormenu {
margin: 5px;
padding: 5px
}

#colormenu a {
font-family: Arial, Helvetica, sans-serif;
padding: 6px 20px 9px 20px;
font-size: 15px;
color: #000;
text-decoration: none;
font-weight: bold;
text-transform: uppercase
}

#colormenu .blue a, #colormenu .red a, #colormenu .green a, #colormenu .yellow a, #colormenu .green2 a {
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out
}

#colormenu .blue a {
border-top: 6px solid #326abd
}

#colormenu .red a {
border-top: 6px solid #b8462c
}

#colormenu .green a {
border-top: 6px solid #a5cc3b
}

#colormenu .yellow a {
border-top: 6px solid #e6ab07
}

#colormenu .green2 a {
border-top: 6px solid #2b9435
}

#colormenu .blue a:hover {
color: #FFF;
background-color: #326abd;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}

#colormenu .red a:hover {
color: #FFF;
background-color: #b8462c;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}

#colormenu .green a:hover {
color: #FFF;
background-color: #a5cc3b;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}

#colormenu .yellow a:hover {
color: #FFF;
background-color: #e6ab07;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}

#colormenu .green2 a:hover {
color: #FFF;
background-color: #2b9435;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}
</style>

4. Jangan lupa tempatin di Area yang agak lebar ya, dan jangan lupa ganti tanda # dengan URL anda ganti juga nama Linknya setelah itu klik SIMPAN, Sekian membuat menu warna - warni nya moga bermanfaat.