0 warih trik buat Menu Dropdown Tanpa Plugin di WordPress azik

warih trik buat Menu Dropdown Tanpa Plugin di WordPress azik - terbaru menarik mantab maximal ajib azik sekali ada dari warih trik buat Menu Dropdown Tanpa Plugin di WordPress azik.

Cara membuat menu drop down di WordPress sebenarnya sangat mudah. Mudah ketika theme wordpress kita sudah support wp-navigation menu.
Bagi theme wordpress yang tidak support wp-navigation dapat memakai plugin sebagai gantinya. Banyak banget plugin yang beredar di wordpress.org, anda bisa mencari jika ingin menggunakan plugin. Bagi yang ingin tantangan dan juga meringankan kerja server website, maka buatlah menu drop down tanpa bantuan plugin.

Berikut Cara Membuat Menu Dropdown tanpa Plugin :

1. Masuk Appereance -> Editor -> Pilih Header.php
2. Cari kode berikut di header.php

   <?php wp_head(); ?>

3. Kemudian copy kan kode berikut ini di bawah kode yang kita temukan tadi.

   <!-- Page menu code -->
   <script type='text/javascript'>
   jQuery(document).ready(function() {
   jQuery("#dropmenu ul").css({display: "none"}); // Opera Fix
   jQuery("#dropmenu li").hover(function(){
   jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(50);
   },function(){
   jQuery(this).find('ul:first').css({visibility: "hidden"});
   });
   });
   </script>

4. Terus tambahkan kode berikut di bawah header

   <div id="main_topmenu">
   <ul id="dropmenu">
   <li><a href="<?php echo get_option('home'); ?>/" >Home</a></li>
   <?php wp_list_categories('sort_column=menu_order&title_li='); ?>
   </ul>
   </div>

   Setelah memasukkan kode di atas Jangan lupa di save
5. Kemudian masuk ke stylesheet.css dan tambahkan kode berikut.

   /* TOP MENU */
   
   #main_topmenu {
   float:left;
   width:780px;
   font-size:14px;
   display: inline;
   margin-right: 0;
   margin-bottom: 0;
   }
   
   #homelink { padding-left:22px !important}
   a#homelink:hover {}
   
   #dropmenu {
   float:left;
   list-style:none;
   position:relative;
   line-height:22px;
   z-index:300;
   width:780px;
   padding-top: 0;
   padding-right: 0;
   padding-left: 0;
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 10;
   margin-left: 0;
   background-color: #666666;
   }
   #dropmenu ul {
   margin:0;
   padding:0;
   list-style:none;
   position:absolute;
   line-height:20px;
   z-index:300;
   position:absolute;
   display:none;
   top:28px;
   left:-1px;
   background-color: #666666;
   }
   
   #dropmenu a {display:block; padding:3px 8px; color:#FFFFFF; text-decoration:none; }
   #dropmenu a:hover {background:#fdffff; color:#000;}
   
   #dropmenu li {float:left; position:relative; display:block}
   
   #dropmenu ul a {border-left:1px solid #595f68;border-right:1px solid #595f68;}
   #dropmenu li ul {border-top:1px solid #595f68; border-bottom:1px solid #595f68; width:167px;}
   #dropmenu li ul a {width:150px; height:auto; float:left; border-bottom:1px solid #cccccc;}
   
   #dropmenu .page_item { background:#FFF; }/* border for IE6 page link listing fix */
   
   #dropmenu .page_item .page_item { font-size:11px; border:none;}
   
   #dropmenu .page_item li ul a {width:normal}
   
   #dropmenu ul ul {line-height:20px;top:auto; }
   #dropmenu ul li{ }
   #dropmenu li ul ul {left:12em; margin:0px 0 0 10px;}
   #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;}
   #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}

6. Kemudian simpan lagi. Selesai dah Membuat Menu Drop down Tanpa Plugin di WordPress :D. Hasil bisa dilihat pada menubar di blog ini.