Senin, 23 April 2012

Cara Membuat Slide Menu Vertikal Dengan CSS3


By on 17.34

Cara Membuat Slide Menu Vertikal Dengan CSS3 - Kali ini saya akan membahas bagaimana Cara Membuat Slide Menu Vertikal Dengan CSS3, mungkin sobat belum pernah melihat Menu Vertikal yang keren ini yang akan saya bahas bagaimana cara membuatnya, dengan memasang menu vertikal ini kemungkinan besar blog anda akan terlihat lebih keren bahkan pengunjung akan bertanya bagaimana cara membuatnya.

Membuat Slide Menu Vertikal ini sangat mudah apalagi menggunakan CSS3 yang akan lebih memeberikan efek cerah pada warna nya, baik langsung saja Cara Membuat Slide Menu Vertikal Dengan CSS3, tapi sebelumnya lihat dulu demo nya jika masih penasaran.

DEMO

Dan berikut langkah-langkah cara membuatnya :

1. Login ke Blog kamu.
2. Pilih Rancangan Pilih Template Designer.

3. Copy kode dibawah ini kekotak kaya gambar diatas :
#hor {
list-style:none;
padding:0;
margin:0;
}
#hor li {
float:left;
padding:5px;
}
#hor a {
display:block;
height: 12px;
text-indent:-999em;
}
#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}
#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}
#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}

/* CSS Style for Vertical Menu */

#ver {
list-style:none;
padding:0;
margin:0;
}
#ver li {
padding:2px;
}
#ver li a {
display:block;
height:12px;
text-indent:-999em;
}

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}
#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}
#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}

.clear {
clear:both;
}


*{
/* 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;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
background:url('http://1.bp.blogspot.com/-jwOb6rML3W0/TrWP2WBsvaI/AAAAAAAAFFg/NK2hIQSRO-E/s1600/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;
}
Atau sobat boleh letakan kode di atas tepat di atas ]]>< /b:skin> (Pilih salah satu saja mau diatas kode ]]></b:skin> atau di kotak CSS)

4. Jika sudah kembali ke menu Rancangan > Add Gadget > HTML Javascript > Copy kode dibawah ini.
<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://www.blazerracing.blogspot.com">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="http://www.blazerracing.blogspot.com">
<span>About</span>
</a>
</li>
<li>
<a class="services" href="http://www.blazerracing.blogspot.com">
<span>Services</span>
</a>
</li>
<li>
<a class="portfolio" href="http://www.blazerracing.blogspot.com">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="http://www.blazerracing.blogspot.com">
<span>Contact us</span>
</a>
</li>
</ul>
</div>

Ganti kode yang berwarna merah dengan Kata nya.
Ganti kode yang berwarna biru dengan URL yang dituju.

Selsai deh semoga sobat mengerti,dan semga blog sobat terlihat cantik.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

5 komentar:

  1. Gimana yah CSS3 itu tidak jauh berbeda dengn CSS biasa namun penempatan kode nya secara bersamaan tanpa harus masuk ke Edit HTML.

    BalasHapus
  2. gan yg rancangan no 2 di copy di mananya klu udah msuk ke edit html

    BalasHapus
  3. Perhatikan dulu gambar nomor 2 lihat kata "PASTE CODE HERE" nah sobat copy kode nomor 3 dan letakan kode nya pada kotak yang ada kata "PASTE CODE HERE"

    BalasHapus