Advertisement
Html/Css/Jquery Wordpress

Membuat Drop Down Menu Pada WordPress Dengan CSS

Membuat drop down menu pada wordpress. Membuat dropdown menu di wordpress itu, saya pikir tidak terlalu sulit. Kamu cuma cukup memahami beberapa kode wordpress dan css saja. Sebelum melanjutkan, artikel ini merupakan salah satu tutorial yang direquest oleh sahabat pembaca pindexain.com lewat kolom komentar. Saya berterima kasih kepada teman-teman yang sudah mau melakukan request tutorial sehingga saya jadi tahu tutorial seperti apa yang dibutuhkan teman-teman dan saya bisa terus mempelajari dan membagikan ilmu yang saya miliki. Jika kamu ingin merequest tutorial ke kami, silahkan hubungi kami.

Tutorial ini saya buat berdasarkan turorial sebelumnya. Cuma ada beberapa perubahan penggunaan dalam penggunaan ul dan li style pada cssnya. Sebelum memasuki kelangkah selanjutnya, saya berharap teman-teman sudah mengetahui bagaimana struktur theme wordpress, agar tidak begitu menyulitkan teman-teman dalam pemahaman dalam tutorial ini.

Agar tidak terlalu banyak basa-basi mari kita langsung memasuki step-stepnya :

Membuat Drop Down Menu Pada WordPress

Buka file functions.php pada folder theme wordpress mu, kemudian sisipkan code berikut,

function bysLabs_setup() {
 //Untuk membuat kateogori menu yang akan muncul pada halaman Appearance > menu dan akan langsung di beri nama Primary Menu
 register_nav_menu( 'primary', __( 'Primary Menu', 'bys' ) );
}
add_action( 'after_setup_theme', 'bysLabs_setup' );

Atau kamu juga bisa menggunakan code berikut,

register_nav_menus( array(
 'primary' => __( 'Primary Menu' )

) );

Code tersebut kegunaannya sama saja, yaitu membuat kategori menu. Kategori yang dimaksud disini bukan kategori yang berada pada post > categories, melainkan pengelompokan menu yang akan dibuat. Dengan cara ini kamu juga bisa membuat lebih dari satu pengelompokan menu navigasi dengan membuat array baru seperti “secondary-menu”.

Langkah berikutnya buka file header.php pada folder theme mu, sisipkan code berikut :

<?php

wp_nav_menu( array

( 'menu_id' => 'menu', 'theme_location' => 'primary'

))

?>

Code tersebut berfungsi untuk memanggil pengelompokan menu yang sudah kamu set pada halaman custom menu. Setelah ini kita bahas.

Selanjutnya masukan code berikutnya pada file style.css.

/*style awal menu dan untuk menghilangkan list style*/
#menu {
 font-family: Arial, Verdana;
 font-size: 14px;
 margin: 0;
 padding: 0;
 list-style: none;
}
/*membuat menu menjadi horizontal dengan display block*/
#menu li {
 display: block;
 position: relative;
 float: left;
}
/*Untuk menyembunyikan ul li (submenu)*/
#menu li ul {
 display: none;
}
/*style awal seblum cursor mouse di arahkan (menu utama)*/
#menu li a {
 display: block;
 text-decoration: none;
 color: #ffffff;
 padding: 5px 15px 5px 15px;
 background: #000;
 /*margin-left: 1px;*/
 white-space: nowrap;
}
/*style setelah cursor diarahkan*/
#menu li a:hover {
background: #666;
}
/*untuk memunculkan submenu jika pada sebuah menu utama ada tag il ul (maksudnya ada tag ul dai dalam tag li)*/
#menu li:hover ul {
 display: block;
 position: absolute;
 left:-40px;
}
/*meratakan sub menu kanan kiri dan menghilangkan fungsi float left (mengembalikan ke default)*/
#menu li:hover li {
 float: none;
}
/*style awal seblum cursor mouse di arahkan (submenu)*/
#menu li:hover a { background: #3b3b3b; }
/*style setelah cursor diarahkan (submenu)*/
#menu li:hover li a:hover {
 background: #666;
}

Pada code tersebut saya masih menggunakan code pada tutorial bagaimana membuat drop down menu dengan css dan html.

Tujuannya agar teman-teman lebih mudah untuk mempelajari isi dari tutorial yang saya buat ini (jika sudah mengikuti dari awal).

Ok, sekarang kita beralih kehalaman Appearance > menu.

Kemudan Buat nama menu yang kamu inginkan.

Drop Down Menu Pada WordPress
Berikutnya, ikuti langkah-langkan yang ada pada gambar :

Membuat Drop Down Menu pada wordpress

Penjelasannya :

  1. “Menu” adalah nama dari kategori/pengelompokan menu yang dibuat.
  2. Sebelum kamu masuk kelangkah kedua, centang checkbox pada pages atau categories yang sesuai dengan pilihan menu yang ingin kamu buat, kemudian klik tombol add to menu. Untuk memasukan langkah kedua ini, kamu hanya perlu melakukan drag menu yang ingin kamu jadikan sub drop down ke kanan.
  3. Kemudian Simpan.
  4. Pada primary menu, pilih nama pengelompokan menu yang sudah kamu buat.
  5. Terkahir simpan.

Demikan beberapa step yang bisa kamu lakukan dalam membuat drop down menu pada wordpress, jika ada hal yang kurang jelas atau kesalahan pada artikel ini, teman-teman bisa menyatakan pada kolom komentar. Maaf tidak ada download dan demo file 😀 Salam.

Editorial Team

Editorial Team adalah mereka yang menulis artikel untuk blog PinDexain.

Related Stories

6 Responses to Membuat Drop Down Menu Pada WordPress Dengan CSS

  1. Trimakasi gan sangat membantu sekali tutorialnya ….

  2. Nice info gan …

  3. bagaimana kalau themanya tidak support untuk menu drop down?

  4. Salam. Gan, kode di function.php di-replace semua atau disisipin di mana? Makasih gan.

  5. Ane pengen sub menunya bisa open close gan kl kaya gitu kan trs muncul. Kan?

Leave a Reply

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