Sekarang sudah banyak tutorial membuat menu horizontal yang beredar pada internet mulai dari yang sederhana hingga yang menggunakan animasi, kali ini kita akan mencoba membuat menu horizontal yang sederhana. Seperti dibawah ini :
Berikut kode menu horizontal :
<style>Keterangan :
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:0px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'> Menu 1</a></li>
<li><a href='#'> Menu 2</a></li>
<li><a href='#'> Menu 3</a></li>
<li><a href='#'> Menu 4</a></li>
<li><a href='#'> Menu 5</a></li>
</ul>
</div>
- Ubah # dengan Link Tujuan Menu
- Ubah Menu dengan nama menu yang Anda inginkan
Cara memasangnya pada blog.
Cara 1 < Elemen Laman > :
- Masuk pada blog Anda
- Pilih Rancangan >> Elemen Laman
- Pilih Tambahkan Widget >> HTML/JavaScript
- Pastekan kode menu horizontal diatas pada widget
- Pindahkan wiidget munu kebawah Header blog Anda
Cara 2 < Edit HTML > :
- Masuk pada blog Anda
- Pilih Rancangan >> Edit HTML
- Centang Expand Template Widget terlebih dahulu
- Cari kode :
<div id='content-wrapper'> - Pastekan kode Menu Horizontal tepat diatas kode <div id='content-wrapper'> tersebut
- Simpan Template dan lihat hasilnya
Selamat Mencoba & Happy Blogging.
Tidak ada komentar:
Posting Komentar