Cheat Solution4u

Aryoz Comunity Pagerank
Join Us !!
Senin, 18 Juni 2012

Cara Membuat Menu Vertikal Fixed Keren

0 komentar
Read More → Cara Membuat Menu Slide Bergaya Vertikal Fixed Mungkin sobat ingin memasang menu seperti gambar di bawah ini, Oke kita lanjut aja ke Tutorial berikut ...

  • Login ke Blogger
  • Rancangan -> Edit HTML
  • Tekan Ctrl+F cari kode ]]></b:skin> copy kode CSS dibawah ini paste diatas kode ]]></b:skin>
/* 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('https://lh5.googleusercontent.com/-KwCHdatizWA/TrjY-aOvayI/AAAAAAAAS9M/UjjseDoabfA/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;

}


  • Selanjutnya Cari kode </body> copy kode berikut ini terus elu masukan di atas kode </body>

<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 us</span>

</a>

</li>

</ul>

</div>


Yang Warna biru elu ubah dengan link yang akan di tuju dan yang warna pink atau merah kamu ubah dengan Judul.

  • Kemudiaan Save Template.
  • Lihat Hasilnya gan !!!! XD,....
Semoga Bermanfaat Bagi Kalian semunya !

Anda Baru Saja Membaca Artikel Tentang Cara Membuat Menu Vertikal Fixed Keren ,Anda Boleh Menyebarluaskan / Mengcopy Paste Artikel Cara Membuat Menu Vertikal Fixed Keren Ini Bermanfaat Buat Anda , Namun Saya Mohon Untuk Mencantumkan Link Cara Membuat Menu Vertikal Fixed Keren Sebagai SumberNya.

Leave a Reply