Horizontal Menu Dropdown Warna Hijau Gradasi

Menambah tutorial membuat menu horizontal dropdown, kali ini saya akan melakukan modifikasi horizontal menu dengan menggunakan warna gradasi hijau setelah sebelumnya saya memberikan juga tutorial membuat menu horizontal dengan warna gradasi merah dan hitam.

Horizontal menu dropdown

Untuk melihat bentuk dari horizontal menu dropdown yang akan kita buat, silahkan anda buka link

demo

Jika anda berminat untuk menggunakannya di template blog anda, mari kita menuju ke tutorial.

Membuat menu horizontal

Seperti pada horizontal menu sebelumnya, kita akan menambahkan kode HTML di template blog anda terlebih dahulu, sederhananya seperti berikut,

<div id='latecnicedeseo'><ul>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Antivirus</a></li>

<li class='ijolumut'>
<a href='#'>Multimedia</a>
<ul>
<li><a href='#'>MP3 Player</a></li>
<li><a href='#'>Video Player</a></li>
</ul>
</li>

<li class='ijolumut'>
<a href='#'>Games</a>
<ul>
<li><a href='#'>RPG</a></li>
<li><a href='#'>1st Person Shooter</a></li>
<li><a href='#'>Race</a></li>
</ul>
</li>

<li><a href='#'>Desktop Enhancements</a></li>
<li><a href='#'>Archive</a></li>
</ul></div>

Pada tutorial kali ini, tautan label yang memiliki sub menu saya tandai dengan nama 'ijolumut' , dengan sub menu yang di mulai dari tag <ul> sampai tag penutup </ul> yang saya beri warna merah. silahkan anda ganti tanda # dengan alamat link yang anda inginkan, dan tulisan tautan dengan anchor text (tulisan label) yang sesuai dengan label blog anda.

Kode di atas anda simpan di template anda (edit HTML) di bawah tag </header>

Kemudian anda paste kode CSS berikut di atas ]]></b:skin> di template blog anda

height:24px;
display:block;
border:1px solid #008000;
border-radius:5px;
margin:0 auto;
padding:0;
}
#latecnicedeseo > ul {
list-style:inside none;
margin:0;
padding:0;
}
#latecnicedeseo > ul > li {
list-style:inside none;
float:left;
display:block;
position:relative;
margin:0;
padding:0;
}
#latecnicedeseo > ul > li > a {
outline:none;
display:block;
position:relative;
font-size:15px;
text-align:center;
text-decoration:none;
text-shadow:3px 3px 4px #000;
color:#fff;
padding:4px 20px;
}
#latecnicedeseo > ul > li:first-child > a {
border-radius:5px 0 0 5px;
}
#latecnicedeseo > ul > li > a:after {
content:'';
position:absolute;
border-right:1px solid #008000;
top:-1px;
bottom:-1px;
right:-2px;
z-index:99;
}
#latecnicedeseo ul li.ijolumut:hover > a:after {
top:0;
bottom:0;
}
#latecnicedeseo > ul > li.ijolumut > a:before {
content:'';
position:absolute;
top:50%;
right:3px;
border:5px solid transparent;
border-top:5px solid #fff;
}
#latecnicedeseo > ul > li.ijolumut:hover > a:before {
top:50%;
}
#latecnicedeseo ul li.ijolumut:hover > a {
background:#008000;
top:-1px;
z-index:999;
}
#latecnicedeseo ul li.ijolumut:hover > ul,#latecnicedeseo ul li.ijolumut:hover > div {
display:block;
}
#latecnicedeseo ul li > ul,#latecnicedeseo ul li > div {
display:none;
width:auto;
position:absolute;
top:24px;
background:#008000;
border-radius:0 0 5px 5px;
z-index:999;
padding:4px 0;
}
#latecnicedeseo ul li > ul {
width:100%;
}
#latecnicedeseo ul li > ul li {
display:block;
list-style:inside none;
position:relative;
margin:0;
padding:0;
}
#latecnicedeseo ul li > ul li a {
outline:none;
display:block;
position:relative;
color:#fff;
text-decoration:none;
text-shadow:2px 2px 4px #000;
margin:0;
padding:10px;
}
#latecnicedeseo,#latecnicedeseo > ul > li > ul > li a:hover {
background-color:#048551;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#0e9402', endColorstr='#048551');
background-image:-webkit-linear-gradient(top, #0e9402 0%, #15d10b 50%, #048551 100%);
background-image:-moz-linear-gradient(top, #0e9402 0%, #15d10b 50%, #048551 100%);
background-image:-ms-linear-gradient(top, #0e9402 0%, #15d10b 50%, #048551 100%);
background-image:-o-linear-gradient(top, #0e9402 0%, #15d10b 50%, #048551 100%);
background-image:linear-gradient(top, #0e9402 0%, #15d10b 50%, #048551 100%);
}
#latecnicedeseo ul li.ijolumut > a:hover,#latecnicedeseo > ul > li > a:hover {
background:#008000;
}

Kemudian simpan template anda.

Jika anda memiliki masalah dengan pemasangan menu horizontal dropdown dengan warna gradasi hijau ini, silahkan gunakan kolom komentar untuk bertanya, dan jika anda rasa artikel kali ini bermanfaat, jangan lupa untuk menambahkan +1 untuk toturial kali ini.
Terima kasih

Artikel Horizontal Menu Dropdown Warna Hijau Gradasi ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh Unknown
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;