Pada perjumpaan kita kali ini saya ingin berbagi tutorial tentang menu dan menu ini menggunakan CSS 3, karna saya sedang mengembangkan ilmu tentang HTML,  Tag kondisonal dan sebagainya jadi kali ini saya tidak menyediakan demo! nanti kalo saya sudah paham benar tantang seluk semua, saya akan membuat demonya.
Walaupun tidak ada demonya sobat tidak perlu takut untuk menggunakan  CSS3 Vertikal Navigation Menu, lagi pula blog tetangga juga tidak atau jarang tu yang menggunakan demo bila membahas menu navigasi.

CSS3 Vertikal Navigation Menu ini akan melayang di bagian kiri blogger sobat, menu ini sangat elegant, dan simple

Bagi sobat yang tertarik dengan menggunakan CSS3 Vertikal Navigation Menu, mari ikuti langkah-langkah berikut ini.

1. Masuk ke akun blogger sobat.

2. Pada Dasbor klick Rancangan ➨ Edit HTML ➨ CentangExpand Template Widget.

4. Selanjutnya sobat cari kode ]]></b:skin> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Bila sudah ketemu sekarang sobat copy kode CSS3 berikut dan paste atau letakkan di atas kode tadi.

*{
/* A universal CSS reset */
margin:0;
padding:0;
}
#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;
/*-o-transition: 0.25s;*/

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('http://4.bp.blogspot.com/-5-AePqw_bOw/T9kZSuPxIRI/AAAAAAAAC7s/eFnRdGclqnA/s1600/otowebsite-navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

6. Masih di dalam Edit Template, sekarang sobat cari kode </body>

7. Lalu copy kode di bawah ini dan letakkan di atas kode tersebut.

<div style='position: fixed; top: 40%; left: 0%;'>
<ul id='navigationMenu'>
<li>
<a class='home' href='#'>
<span>Home</span>
</a>
</li>

<li>
<a class='about' href='#'>
<span>About</span>
</a>
</li>

<li>
<a class='services' href='#'>
<span>Services</span>
</a>
</li>

<li>
<a class='portfolio' href='#'>
<span>Portfolio</span>
</a>
</li>

<li>
<a class='contact' href='#'>
<span>Contact</span>
</a>
</li>
</ul>
</div>

8. Simpan template.

Keterangan:
  • Ganti tanda pagar (#) link atau url tujuan.
  • Warna hijau adalah warna nama judul, bila kurang sesuai namanya bisa sobat ganti, ok!
Saya rasa cukup untuk kali ini, semoga articles kali ini bisa bermanfaat untuk sobat semua.

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat, silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top