» Home » Unlabelled » Membuat Menu Vertikal Cantik Dengan CSS3

Membuat Menu Vertikal Cantik Dengan CSS3

Selalu kurang puas dan selalu saja ingin menciptakan hal yang baru khususnya urusan penampilan pada blog kita.

Kali ini blogger pemula ingin berbagi tips cara membuat menu vertikal cantik dengan CSS3, jika sobat tertarik ingin mencobanya silahkan sobat simak artikel ini secara baik dan benar agar hasilnya sesuai dengan keinginan.

Untuk demo penampilanya sobat bisa lihat gambar disamping, hasilnya kurang lebih sama persis seperti gambar di artikel ini, mohon maaf sebelumnya karena halaman live demonya belum ada, :) (belum dibuat,hehe..)

Berikut langkah-langkah cara membuat menu vertikal cantik dengan CSS3 yang bisa sobat terapkan :

Login ke Akun Blogger
Masuk ke pengaturan template
Klik Edit HTML
Cari kode seperti dibawah ini ]]></b:skin>
Letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

*{
/* A universal CSS reset */
margin:0;
padding:0;
}
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;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
/* The background sprite: */
background:url('http://i785.photobucket.com/albums/yy131/djnand/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;
}

Langkah selanjutnya cari kode <body>
Letakkan kode HTML dibawah ini setelah kode <body>

<ul id="navigationMenu">
<li>
<a class="home" href="#">
Home
</a>
</li>
<li>
<a class="about" href="#">
About
</a>
</li>
<li>
<a class="services" href="#">
Services
</a>
</li>
<li>
<a class="portfolio" href="#">
Portfolio
</a>
</li>
<li>
<a class="contact" href="#">
Contact us
</a>
</li>
</ul>

Terakhir simpan template dan lihat hasilnya....

Catatan :

Link warna merah bisa tidak digunakan jika sobat bisa membuat efek yang menyerupai gambar tersebut agar tutorial ini pure CSS3
Warna orange bisa sobat ganti sesuai kebutuhan
Warna biru silahkan sobat ganti dengan URL tujuan (biasanya halaman statis)
Silahkan berkreasi sendiri dengan merubah warna dan ukuran sesuai kebutuhan

Semoga artikel tentang cara membuat menu vertikal cantik dengan CSS3 ini bermanfaat..

Share on : Facebook Twitter Google+ Linkedin

Diposting Oleh : Unknown ❖ 7:19 PM ❖ 48 komentar

Advertise Here

By adjieumbara.blogspot.com

300x250