Beranda / Blogger Tutorial / CSS3 / Menu Dan Navigasi

Simple CSS3 Horizontal Menu

Setelah lama meninggalkan Blog ini, kali ini saya ingin mengajak anda membuat Simple CSS3 Horizontal Menu. Bentuknya dapat anda lihat pada gambar diatas atau anda bisa langsung melihat demo-nya KLIK DISINI dan lihat Navigasi Menu Berwarna Cokelat...

Lantas bagaimana cara membuatnya? silahkan ikuti panduan dibawah ini:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:

#menu li {
display: inline;
list-style: none;
padding: 0;
}

#menu li a {

border: 1px solid white;
padding: 15px 20px 15px 20px;
text-decoration: none;
color:black;
margin-left: -5px;
/* This is the background used for the animation */
background-image:
url('http://i785.photobucket.com/albums/yy131/djnand/MenuCokelat.jpg');
/* Align the background image position to the left of the link */
background-position: left;
-webkit-transition: all 0.8s ease-in-out;
/* Animation with transition in Firefox (No supported Yet) */
-moz-transition: all 0.8s ease-in-out;
/* Animation with transition in Opera (No supported Yet)*/
-o-transition: all 0.8s ease-in-out;
}

#menu li a:hover {
color: white;
/* Align the background image position of the background to the right*/
background-position:right;
}

Setelah Itu Beralihlah dan cari kode <body>

Jika Sudah, Letakkan HTML dibawah ini tepat dibawah Kode tersebut atau setelah Kode <body> tersebut:

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Jika Sudah Save Template Anda dan Lihat Hasilnya...

Ps: Disini saya menggunakan Background Gambar Untuk Navigasinya, namun jika anda ingin menggunakan Menu Ini Pure hanya dengan CSS3 anda bisa mengubah gambar itu kedalam Kode Warna Hexa yang anda inginkan...

Dan silahkan Ganti Tulisan yang berwarna merah dengan tulisan yang ingin anda tampilkan pada Menu tersebut dan yang berupa # dengan Link Urlnya....

Selamat Mencoba....