Cara Membuat Menu Vertikal Fixed Keren

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 BloggerRancangan -> Edit HTMLTekan 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-rept;



/* CSS3 Radial Gradients */

background-:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);

background-:-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-rept;

height:39px;

width:38px;

display:block;

position:relative;

}



/* eral 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 !