Membuat Menu Horizontal WordPress

Menu horizontaladalah cara terbaik untuk membuat menu kategori atau Halaman, biasanya menu seperti ini menyoroti daerah-daerah tertentu yang menarik dalam situs Anda. Banyak designer web menempatkan menu horizontal di bawah header, yaitu tempat yang paling mudah terlihat.

Horizontal menu dibuat dengan fitur List HTML.  Dan dengan CSS memungkinkan kita untuk mengatur daftar menu untuk tampil pada satu baris, dan tiap baris pun dapat dibuat terpisah.

Membuat Menu Horisontal

Berikut adalah cara sederhana untuk membuat menu horisontal. Sebaiknya daftar menunya jangan terlalu banyak dan usahakan sesuaikan dengan lebar theme yang anda gunakan karena biasanya jika terlalu banyak daftar menu yang anda tampilkan bisa menyebabkan beberapa masalah tata letak.

<div id="navmenu">
<ul>
	<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
	<li><a href="wordpress/recipes/">RECIPES</a></li>
	<li><a href="wordpress/travel/">TRAVEL</a></li>
	<li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>

Seperti yang Anda lihat, disertakan juga tag PHP untuk “HOME” dan beberapa kategori, serta link ke WordPress. Daftar menu ini akan terlihat seperti ini, dalam bentuk yang paling sederhana:

• HOME
• RECIPES
• TRAVEL
• WORDPRESS

Anda juga bisa gunakan <?php dp_list_categories(); ?> untuk menampilkan daftar kategori secara otomatis dari blog anda.

<div id="navmenu">
<ul>
 <li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<?php dp_list_categories(); ?>
 <li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>

Menu ini biasanya ditempatkan di bawah header. Di WordPress v1.5, buka file header.php dalam folder Theme WordPress yang anda gunakan. Paste kode di bagian bawah file setelah header DIV dan kemudian simpan file tersebut.

Di WordPress v1.2, buka file index.php dan cari akhir dari bagian header dan tempatkan kode tersebut di sana.

Tambahkan CSS

Tanpa CSS, list yg kita buat tadi secara default akan tampil vertikal. Melalui stylesheet CSS, kita perlu menambahkan referensi untuk navmenu dan langkah pertama adalah menghapus bullet dan menetapkan margin dan padding ke nol untuk seluruh daftar.

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; }

Setelah CSS itu anda tambahkan ke theme anda,  simpan dan lihat di browser anda bahwa tidak ada lagi bullet.

Sekarang, kita perlu menambahkan teknik yang akan menetapkan daftar menu ini menjadi garis horizontal.

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }

Karena ini adalah link, kita harus memperbaiki tampilan dari link. Ada banyak hal yang dapat Anda lakukan untuk daftar menu ini, tetapi untuk sekarang, mari kita tambahkan beberapa ruang ke daftar link sehingga masing-masing menu tidak kelihatan rapat dan menghapus link default yang memiliki garis bawah serta link yang berubah ketika mouse bergerak di atasnya.

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; padding: 5px 20px 5px 20px}
#navmenu a {text-decoration:none; color: blue; }
#navmenu a:hover {color: purple; }

Beberapa tambahan agar tampilannya dapat di ubah-ubah:

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none;  margin: 4px;
	padding: 5px 20px 5px 20px; color: blue;
	background: pink;}
#navmenu ul li a:hover {color: purple;
	background: yellow; }

jika anda melakukannya dengan baik, maka tampilannya akan seperti berikut:

• HOME
• RECIPES
• TRAVEL
• WORDPRESS

Jika tanpa CSS

Salah satu yang harus dicatat bahwa semua hal di atas akan mempunyai tampilan berbeda di browser jika tanpa CSS, yang terjadi adalah daftar masih akan diformat secara vertikal, bukan horizontal.
Oleh karena itu, untuk membuatnya portable untuk beberapa browser, salah satu yang bisa anda gunakan misalnya:

<p>Archives:<?php wp_get_archives('format=custom&show_post_count=1&type=yearly&after=;'); ?>
Categories:<?php echo str_replace('<br />',';', wp_list_categories('style=&show_count=1&echo=0'));?></p>

Nah menu ini tentu saja dapat anda ubah tampilannya. Gunakan imajinasi Anda dan desain anda sendiri untuk ganti warna, atau apapun yang Anda inginkan.

sumber: http://alamindawa.com/2011/05/membuat-menu-horizontal-wordpress/