Membuat menu vertikal animasi dengan css

Membuat menu vertikal dengan css. Oke kembali lagi kita membahas tentang menu dengan css, namun kali ini selain tampilannya yang beda dan menunya berbentuk vertikal. sebelumnya saya banyak posting tentang menu horizontal dengan css , ada juga yang menggunakan javascript.

balik ke pokok postingan kali ini, kita akan membuat vertikal menu yang ada efeknya menggunakan css3.
untuk lebih jelasnya berikut demo nya:



bagaimana sobat, cukup kerenkan..
ok sekarang lanjut ke cara-caranya:
1.letakkan kode css berikut ini di atas </head>

<style>

ul.svertical{
width: 200px; /* lebar menu */
overflow: auto;
background: black; /*warna background menu */
margin: 0;
padding: 0;
padding-top: 7px; /* spasi dari atas */
list-style-type: none;
}

ul.svertical li{
text-align: right; /*menu dari kanan ,ubah menjadi left untuk menu dari kiri */
}

ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68);
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* jarak spasi antar link */
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

ul.svertical li a:hover{
padding-right: 30px;
color: black;
background: rgb(153,249,75);
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8);
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}

ul.svertical li a:before{
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px;
border-color: transparent transparent transparent black;
}

</style>
Sekarang lanjut ke kode htmlnya:

<ul class="svertical">
<li><a href="http://thizan.blogspot.com/">Cerita Lucu</a></li>
<li><a href="http://thizan.blogspot.com/">Trik Blogspot</a></li>
<li><a href="http://thizan.blogspot.com/">Trik Css</a></li>
<li><a href="http://thizan.blogspot.com/">Belajar css</a></li>
<li><a href="http://thizan.blogspot.com/">Top dan Unik</a></li>
<li><a href="http://thizan.blogspot.com/">Trik Facebook</a></li>
</ul>

nah..untuk penempatannya , terserah anda mau letakkan di mana, setelah anda meletakkan kod css di atas </head>.
untuk menampilkan menu cukup copy dan pastekan kode html di mana anda suka.
jika sobat mau menu vertikal melayang di kiri body blog atau kanan.
saya pernah posting tentang trik mmbuat iklan melayang di blog, nah anda bisa saja mengunakan trik itu untuk membuat menu di kiri atau kanan body. jika sobat bingun , bisa komentar aja , nanti saya akan berikan petunjuk dan tutorialnya.

nah.. cukup itu saja.. cukup gampangkan.. oy jangan lupa saran dan pendapatnya ya..