Imenu 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

If you surrender to the wind, you can ride it. Toni Morrison

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

Last Modif at July 8th, 2011

wah, udah lama yah saya ngga nulis di indaam.net, 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.net/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.net' title='Indam site home'>home</a></li>
<li><a href='http://www.indaam.net' 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.net/2011/" title="2011">2011</a>
<ul>
<li><a href="http://www.indaam.net/2011/05/" title="May 2011">May </a></li>
<li><a href="http://www.indaam.net/2011/04/" title="April 2011">April </a></li>
<li><a href="http://www.indaam.net/2011/03/" title="March 2011">March </a></li>
<li><a href="http://www.indaam.net/2011/02/" title="February 2011">February </a></li>
<li><a href="http://www.indaam.net/2011/01/" title="January 2011">January </a></li>
</ul>
</li>
<li><a href="http://www.indaam.net/2010/" title="2010">2010</a>
<ul>
<li><a href="http://www.indaam.net/2010/12/" title="December 2010">December </a></li>
<li><a href="http://www.indaam.net/2010/11/" title="November 2010">November </a></li>
<li><a href="http://www.indaam.net/2010/10/" title="October 2010">October </a></li>
<li><a href="http://www.indaam.net/2010/09/" title="September 2010">September </a></li>
<li><a href="http://www.indaam.net/2010/08/" title="August 2010">August </a></li>
<li><a href="http://www.indaam.net/2010/07/" title="July 2010">July </a></li>
<li><a href="http://www.indaam.net/2010/06/" title="June 2010">June </a></li>
<li><a href="http://www.indaam.net/2010/05/" title="May 2010">May </a></li>
<li><a href="http://www.indaam.net/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


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

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.net 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.net' title='Indam site home'>home</a></li>
<li><a href='http://www.indaam.net' 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.net/2011/" title="2011">2011</a>
<ul>
<li><a href="http://www.indaam.net/2011/05/" title="May 2011">May </a></li>
<li><a href="http://www.indaam.net/2011/04/" title="April 2011">April </a></li>
<li><a href="http://www.indaam.net/2011/03/" title="March 2011">March </a></li>
<li><a href="http://www.indaam.net/2011/02/" title="February 2011">February </a></li>
<li><a href="http://www.indaam.net/2011/01/" title="January 2011">January </a></li>
</ul>
</li>
<li><a href="http://www.indaam.net/2010/" title="2010">2010</a>
<ul>
<li><a href="http://www.indaam.net/2010/12/" title="December 2010">December </a></li>
<li><a href="http://www.indaam.net/2010/11/" title="November 2010">November </a></li>
<li><a href="http://www.indaam.net/2010/10/" title="October 2010">October </a></li>
<li><a href="http://www.indaam.net/2010/09/" title="September 2010">September </a></li>
<li><a href="http://www.indaam.net/2010/08/" title="August 2010">August </a></li>
<li><a href="http://www.indaam.net/2010/07/" title="July 2010">July </a></li>
<li><a href="http://www.indaam.net/2010/06/" title="June 2010">June </a></li>
<li><a href="http://www.indaam.net/2010/05/" title="May 2010">May </a></li>
<li><a href="http://www.indaam.net/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.net 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 :)

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

15 thoughts on “Imenu Dropdown Menu versi 2 for wordpress dan blogspot”

  1. andre says:

    Salam kenal,

    terima kasih banyak atas ilmunya, cuma kalo boleh tanya bagaimana ya cara merubah warna yang ada dimenu tersebut.. Terima kasih sebelumnya

    Andre..

  2. Ari says:

    Suka SUka SUka….
    :D

  3. Rouen says:

    wah kayanya bisa dipelajari, coba pahami dulu deh :D

  4. Rouen says:

    uda dikit paham settingnya, tapi di blog saya ga nemuin tag adanya <body

    haduh gimana itu kang

  5. Thanks ilmunya sob, ijin pakai ilmunya ya….

  6. msrosyidi says:

    Sedang nyari-nyari tutorial bikin theme (maklum pemula) eh kesasar di tempat yang tepat dan benar….
    Baru kali ini melihat blog dengan tampilan seperti ini… unik… bikin betah banget browsing artikel di sini hingga berjam-jam…
    Izin jadi murid dan salam kenal…

  7. lutfi says:

    mantab kali kang tutorny :)
    web ny jg keren

  8. lina says:

    maksih ilmunya boz… sangat pas sekali dengan saya yang lagi belajar… ^___^

  9. wendy says:

    tag Body gak ktemu gan….
    jadi gimana solusinya gan….

    ^_^

    1. indam says:

      coba dibaca dengan seksama mas ^^

      1. giovanny says:

        iya itu gan gak ketemu tag

  10. herusularto says:

    Sudah nyoba beberapa kali. tapi masih belum bisa juga.

    1. indam says:

      Dibaca pelan pelan mas…

  11. Deden says:

    Mas makasih ilmunya, sangat-sangat bermanfaat.
    semoga amal ibadahnya di terima…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-