Home » Uncategorized » Membuat Menu Horizontal WordPress kang

Membuat Menu Horizontal WordPress kang

Start here

Menu horizontal adalah 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&gt;
</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 wp_list_pages(‘title_li=&depth=0&sort_column=menu_order’); ?> 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 wp_list_pages(‘title_li=&depth=0&sort_column=menu_order’); ?>
<li><a href=”http://www.wordpress.org”>WORDPRESS</a></li&gt;
</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.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: