menu Dropdown Menu versi 2 for wordpress dan blogspot

Imenu ini adalah dropdown menu yang dilengkapi dengan sub sub menu seperti home, about, kategori, archive dll, imenu ini bisa dipasang di wordpress ataupun blogspot

wah, udah lama yah saya ngga nulis di indaam.com, mungkin pengunjung setia blog ini ‘emang ada?’ merasa kecewa karena ngga ada tulisan baru ‘sorry yah konco’. Bukanya ngga ada ide atau waktu, beberapa waktu lalu saya disibukkan dengan theme wordpress yang saya submit di directory wordpress. Saya sangat berambisi agar theme itu bisa di approved lagi seperti Simpleindo kemarin ‘sebenarnya tahun lalu’. Kecewanya saya ialah, sudah empat kali di submit ulang tapi tetap saja belum di approved, ada beberapa script dan cross browser ‘khususnya ie sampah‘ yang harus diperbaiki’. Jujur saja nge-debebugger itu cape banget, googling sana sini ‘udah sampai majojeng’, tetap saja hasilnya ngga ada yang memuaskan alias waktuku terbuang percuma  . Akhirnya saya memutuskan untuk stop ngoding dulu, ya katanya di bisa ngerefresh kepala yang terasa udah mau beku dan buntu ini berrr. Well, saya sudah niatkan theme itu harus bisa masuk directory wordpress ‘untuk sekarang emang belum’ sebulan atau setahun lagi ngga apa-apah yang penting nantinya bisa diapproved. Doain yah teman.
Oia, kemarin saya juga habis ngerombak tampilan single page sketsa theme yang saya gunakan di blog ini, mungkin beberapa hari lagi ‘udah bisa dilihat hasilnya’.

Oklah mari kita ke inti sari ‘nutri sari kali yah?’ Artikel atau tulisan ini akan membahas Imenu versi dua.
apa itu imenu versi dua?

Imenu versi dua ini adalah revolusi dari imenu versi 0.1 kemarin. seperti yang saya katakan sebelumnya, Imenu adalah dropdown menu yang saya kembangkan sendiri, alias source kodenya saya tulis sendri.
kelebihan dari imenu dropdown ini adalah tidak ada javacrirpt yang terkandung didalamnya, jadi walaupun javascript di-disable, imenu ini akan tetap bekerja dengan baik, di versi dua ini juga sudah diperbaiki untuk menyesuaikan dengan IE, sayangnya di IE versi 6 ‘tidak bekerja dengan baik’.

mungkin sobat bertanya : kok bisa jadi dropdown menu, kan ngga pakai javascipt? Simple saja, kita menggunakan property display:none dan display:block. cara kerja seperti ini. Awalnya tag ul ber-display:none dan ketika cursor melintas :hover, maka tag ul akan berdisplay block. Jadi ketika di :hover akan muncul menu-menu (ul)dibawahnya. Untuk rincian dan cara kerjanya baca ini : http://www.indaam.com/2011/02/imenu-dropdown-menujust-css-by-indam baiklah, kita mulai dengan
code css imenu-v2


<style type='text/css'>
<!--
/*
ini adalah cssnya, silakan tambahkan ke-atas tag </head>
*/
.clear{clear:both}
#id-imenu-dropdown{
position:relative;
z-index:9999;
width:100%;
margin: 0 auto;
min-height: 40px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
/* general setting */
.imenu-dropdown-menu-v2{
float:left;
list-style:none;
padding:0 0 0 20px;
margin:0;
}
.imenu-dropdown-menu-v2 li{
list-style:none;
float:left;
margin:0;
padding:0;
}
.imenu-dropdown-menu-v2 li a{
text-decoration:none;
display:block;
text-transform:capitalize;
}
.imenu-dropdown-menu-v2 li a:link,
.imenu-dropdown-menu-v2 li a:visited{
min-width:80px;
text-align:center;
font-size:14px;
font-family:Arial, helvetica, sans-serif;
padding:8px 2px 10px 2px;
margin:4px 0 0 2px;
}
.imenu-dropdown-menu-v2 #actived{
-moz-border-radius:3px 3px 1px 1px;
-webkit-border-radius:3px 3px 1px 1px;
border-radius:3px 3px 1px 1px;
}
.imenu-dropdown-menu-v2 li a:hover,
.imenu-dropdown-menu-v2 li a:active{
-moz-border-radius:3px 3px 1px 1px;
-webkit-border-radius:3px 3px 1px 1px;
border-radius:3px 3px 1px 1px;
}
/* .imenu-dropdown-menu-v2 li li a[href='#']:after{
content:">>";
font-weight:bold;
} */
.imenu-dropdown-menu-v2 li li a:link,
.imenu-dropdown-menu-v2 li li a:visited{
width:191px;
margin:0;
padding:5px 0 5px 8px;
text-align:left;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
.imenu-dropdown-menu-v2 ul{
width:200px;
position:absolute;
padding:0;
margin:0 0 0 2px;
padding: 5px 0;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.imenu-dropdown-menu-v2 ul ul,
.imenu-dropdown-menu-v2 ul ul ul,
.imenu-dropdown-menu-v2 ul ul ul ul,
.imenu-dropdown-menu-v2 ul ul ul ul ul{
margin:-40px 0 0 130px;
padding:5px 0;
}
.imenu-dropdown-menu-v2 li:hover ul,
.imenu-dropdown-menu-v2 li ul li:hover ul,
.imenu-dropdown-menu-v2 li ul li ul li:hover ul,
.imenu-dropdown-menu-v2 li ul li ul li ul li:hover ul,
.imenu-dropdown-menu-v2 li ul li ul li ul li ul li:hover ul
{display:block;}
.imenu-dropdown-menu-v2 ul,
.imenu-dropdown-menu-v2 ul ul,
.imenu-dropdown-menu-v2 li:hover ul ul,
.imenu-dropdown-menu-v2 li:hover ul ul ul,
.imenu-dropdown-menu-v2 li:hover ul ul ul li ul,
.imenu-dropdown-menu-v2 li:hover ul ul ul li ul li ul
{display:none;}
/* end general setting */
/* set color */
#id-imenu-dropdown{
background:#d3d3d3;
border:1px solid #c9cacb;
background:-moz-linear-gradient(
top,
#ffffff 0%,
#edeeee 4%,
#b6b9bd 100%)
;
background:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #ffffff),
color-stop(4%, #edeeee),
color-stop(100%, #b6b9bd)
);
}
.imenu-dropdown-menu-v2 li a:link,
.imenu-dropdown-menu-v2 li a:visited{
color:#555555;
}
.imenu-dropdown-menu-v2 #actived,
.imenu-dropdown-menu-v2 li a:hover,
.imenu-dropdown-menu-v2 li a:active{
background:#ffffff;
-moz-box-shadow:
inset -1px -1px 2px #999999,
inset 1px 1px 2px #999999;
box-shadow:
inset -1px -1px 2px #999999,
inset 1px 1px 2px #999999;
-webkit-box-shadow:
inset -1px -1px 2px #999999,
inset 1px 1px 2px #999999;
}
.imenu-dropdown-menu-v2 li li a:link,
.imenu-dropdown-menu-v2 li li a:visited{
color:#555555;
border-bottom:1px solid #ddd;
}
.imenu-dropdown-menu-v2 li li a:hover,
.imenu-dropdown-menu-v2 li li a:active{
background: #f5f5f5;
color:#777777;
}
.imenu-dropdown-menu-v2 ul{
background: #d3d4d3;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #aaaaaa;
}
/* end set color */
-->
</style>
<!--[if IE]>
<style type='text/css'>
/* for IE */
#id-imenu-dropdown{
height: 40px;
}
#id-imenu-dropdown-ie{
position:relative;
z-index:9999;
width:100%;
margin: 0 auto;
height: 40px;
}
#id-imenu-dropdown-ie-bottom{
margin:-41.5px 0 0 0;
height: 40px;
float:left;
width:100%;
}
/* set color */
#id-imenu-dropdown{background:transparent!important;}
#id-imenu-dropdown-ie{filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#edeeee',endColorstr='#b6b9bd',GradientType=0);
border:1px solid #c9cacb;}
/* ie */
</style>
<![endif]-->

Code markup HTML imenu-v2


<!--[if IE]>
<div id='id-imenu-dropdown-ie'>
</div>
<![endif]-->
<!--[if IE]>
<div id='id-imenu-dropdown-ie-bottom'>
<![endif]-->
<div style='/* ini adalah html-nya, silakan masukan ke element body, atau sesuaikan */' id='id-imenu-dropdown'>
<ul class='imenu-dropdown-menu-v2'>
<li><a href='http://www.indaam.com' title='Indam site home'>home</a></li>
<li><a href='http://www.indaam.com' title='About Indam'>About</a></li>
<li><a href='http://.com' title=''>Indam On</a>
<ul>
<li><a href='http://facebook.com/indaam' title='Indam On facebook'>Facebook</a></li>
<li><a href='http://twitter.com/indaam' title='Indam On twitter'>Twitter</a></li>
<li><a href='http://intheamwhy.blogspot.com' title='Indam On Blogspot'>Blogspot</a></li>
</ul>
</li>
<li><a href='http://.com' title=''>Archives</a>
<ul>
<li><a href="http://www.indaam.com/2011/" title="2011">2011</a>
<ul>
<li><a href="http://www.indaam.com/2011/05/" title="May 2011">May </a></li>
<li><a href="http://www.indaam.com/2011/04/" title="April 2011">April </a></li>
<li><a href="http://www.indaam.com/2011/03/" title="March 2011">March </a></li>
<li><a href="http://www.indaam.com/2011/02/" title="February 2011">February </a></li>
<li><a href="http://www.indaam.com/2011/01/" title="January 2011">January </a></li>
</ul>
</li>
<li><a href="http://www.indaam.com/2010/" title="2010">2010</a>
<ul>
<li><a href="http://www.indaam.com/2010/12/" title="December 2010">December </a></li>
<li><a href="http://www.indaam.com/2010/11/" title="November 2010">November </a></li>
<li><a href="http://www.indaam.com/2010/10/" title="October 2010">October </a></li>
<li><a href="http://www.indaam.com/2010/09/" title="September 2010">September </a></li>
<li><a href="http://www.indaam.com/2010/08/" title="August 2010">August </a></li>
<li><a href="http://www.indaam.com/2010/07/" title="July 2010">July </a></li>
<li><a href="http://www.indaam.com/2010/06/" title="June 2010">June </a></li>
<li><a href="http://www.indaam.com/2010/05/" title="May 2010">May </a></li>
<li><a href="http://www.indaam.com/2010/04/" title="April 2010">April </a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class='clear'></div>
</div><!-- #id-imenu-dropdown -->
<!--[if IE]>
</div>
<![endif]-->

Preview imenu-v2

Jadinya seperti ini
home
About
Indam On
Archives


Keterangan

Karena imenu ini disusun menggunakan tag ul dan li, jadi sobat harus benar-benar ngerti html untuk menyusun sub-sub menunya.

Untuk preview imenu diatas, susunan ul li-nya seperti ini
home
About
Indam On
Facebook
Twitter
Blogspot
Archives
2011
June
imenu dropdown menu versi 2 for wordpress dan blogspot
May
April
March
February
January
2010
December
November
October
September
August
July
June
May
April
Pemasangan Imenu untuk wordpress

Step 1
Copy style css imenu diatas, lalu paste keatas tag </head>
Tag </head> ini, biasanya ada di header.php

Step 2
Jika belum ada, tambahkan code ini di functions.php
register_nav_menus( array( 'imenu' => __( 'imenu', '' ), ) );
Fungsinya, agar nav-menu bawaan wordpress dapat bekerja

Step 3
Copy code berikut lalu letakan dibawah tag <body>
Tag <body> ini biasanya ada di header.php


<!--[if IE]>
<div id='id-imenu-dropdown-ie'>
</div>
<![endif]-->
<!--[if IE]>
<div id='id-imenu-dropdown-ie-bottom'>
<![endif]-->
<div id='id-imenu-dropdown'>
<ul class='imenu-dropdown-menu-v2'>
<?php if ( is_home() ): ?>
<li><a id='actived' href='<?php echo home_url()?>' title='<?php bloginfo('name');?>'><?php _e('home', 'imenu'); ?></a></li>
<?php else : ?>
<li><a href='<?php echo home_url()?>' title='<?php bloginfo('name');?>'><?php _e('home', 'imenu'); ?></a></li>
<?php endif; ?>
<?php wp_list_pages('title_li=&sort_column=menu_order' ) ?>
<li><a href='#'><?php _e( 'menus', 'imenu'); ?></a>
<?php wp_nav_menu( array(
'container' => '',
'menu_class' => '',
'fallback_cb' => ''
) );
?></li>
<li><a href="#" title="title">lainya</a>
<ul>
<li><a href="#" title="title">lainya 1</a></li>
<li><a href="#" title="title">lainya 2</a></li>
<li><a href="#" title="title">lainya 3</a></li>
<li><a href="#" title="title">lainya 4</a></li>
</ul>
</li>
<li><a href="#" title="title">lainya lagi</a></li>
</ul>
<div class='clear'></div>
</div><!-- menu -->
<!--[if IE]>
</div>
<![endif]--><!-- this imenu created by http://www.indaam.com please dont remove me, thanks -->

Pemasangan Imenu untuk blogspot

Step 1
login -> rancangan -> edit html, lalu
copy style css imenu diatas, lalu paste keatas tag </head>

Step 2
Salin markup berikut lalu paste dibawah tag <body>


<!--[if IE]>
<div id='id-imenu-dropdown-ie'>
</div>
<![endif]-->
<!--[if IE]>
<div id='id-imenu-dropdown-ie-bottom'>
<![endif]-->
<div style='/* ini adalah html-nya, silakan masukan ke element body, atau sesuaikan */' id='id-imenu-dropdown'>
<ul class='imenu-dropdown-menu-v2'>
<li><a href='http://www.indaam.com' title='Indam site home'>home</a></li>
<li><a href='http://www.indaam.com' title='About Indam'>About</a></li>
<li><a href='http://.com' title='indam on'>Indam On</a>
<ul>
<li><a href='http://facebook.com/indaam' title='Indam On facebook'>Facebook</a></li>
<li><a href='http://twitter.com/indaam' title='Indam On twitter'>Twitter</a></li>
<li><a href='http://intheamwhy.blogspot.com' title='Indam On Blogspot'>Blogspot</a></li>
</ul>
</li>
<li><a href='http://.com' title='Archives'>Archives</a>
<ul>
<li><a href="http://www.indaam.com/2011/" title="2011">2011</a>
<ul>
<li><a href="http://www.indaam.com/2011/05/" title="May 2011">May </a></li>
<li><a href="http://www.indaam.com/2011/04/" title="April 2011">April </a></li>
<li><a href="http://www.indaam.com/2011/03/" title="March 2011">March </a></li>
<li><a href="http://www.indaam.com/2011/02/" title="February 2011">February </a></li>
<li><a href="http://www.indaam.com/2011/01/" title="January 2011">January </a></li>
</ul>
</li>
<li><a href="http://www.indaam.com/2010/" title="2010">2010</a>
<ul>
<li><a href="http://www.indaam.com/2010/12/" title="December 2010">December </a></li>
<li><a href="http://www.indaam.com/2010/11/" title="November 2010">November </a></li>
<li><a href="http://www.indaam.com/2010/10/" title="October 2010">October </a></li>
<li><a href="http://www.indaam.com/2010/09/" title="September 2010">September </a></li>
<li><a href="http://www.indaam.com/2010/08/" title="August 2010">August </a></li>
<li><a href="http://www.indaam.com/2010/07/" title="July 2010">July </a></li>
<li><a href="http://www.indaam.com/2010/06/" title="June 2010">June </a></li>
<li><a href="http://www.indaam.com/2010/05/" title="May 2010">May </a></li>
<li><a href="http://www.indaam.com/2010/04/" title="April 2010">April </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="title">lainya</a>
<ul>
<li><a href="#" title="title">lainya 1</a></li>
<li><a href="#" title="title">lainya 2</a></li>
<li><a href="#" title="title">lainya 3</a></li>
<li><a href="#" title="title">lainya 4</a></li>
</ul>
</li>
<li><a href="#" title="title">lainya lagi</a></li>
</ul>
<div class='clear'></div>
</div><!-- #id-imenu-dropdown -->
<!--[if IE]>
</div>
<![endif]--><!-- this imenu created by http://www.indaam.com please dont remove me, thanks -->


Step 3
Sebelum disave, edit dulu code-markup-nya
Berikut keteranganya
setelah href=' adalah url, silakan sesuaikan
setelah title=' adalah judul, sesuaikan
sebelum </a> adalah anchor, atau tampilan yang akan muncul nantinya.

Rincian: Posisi atau letak Imenu ini bisa disesuaikan dengan keinginan sobat ‘misal diatas header atau dibawah header’ caranya? pada intinya letakkan markup html imenu ke element yang sesuai dengan keiginan sobat. pada contoh diatas, kita meletakanya tepat dibawah tag <body> jadi posisi atau letak imenunya berada tepat dibawah tag <body> atau paling atas.
Bagaimana cara menambahkan Imenu di CMS lain?

Simple, markup dan CSS-nya kan sudah ada, tinggal disesuaikan aja.

Well, sekian sharing kali ini. Jika ada bug/error atau pertanyaan, silakan tinggalkan komentar. Semoga bermutu