Emm sekarang kita akan membahas Menu Vertikal Dengan Efek Transition menu ini berbentuk vertikal cocok kalau di simpan di sidebar, dengan sedikit sentuhan CSS Transition maka pergerakan menu / Animasi menu ini akan terlihat lembut dan sangat Anggun ( kayak penyanyi aja ) hehehe, silahkan lihat demonya lah biar gak penasaran.
DEMO
Silahkan sorot / sentuh linknya maka dia akan sedikit bergoyang / bergerak ke kiri itulah efek animasi css transition nya, menu ini nemu dari Dynamicdrive lumayanlah buat nyimpen link di blog biar gak tercecer kesana kemari.
Untuk menggunakan Vertikal Menu Animasi ini silahkan
1. Masuk ke blog anda.
2. Klik Rancangan / Tata Letak
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukan kode di bawah ini di kolom bagian bawah pada HTML/Javascript
<style type="text/css">
ul.svertical{
width: 200px;
overflow: auto;
background: #444;
margin: 0 auto;
padding: 0;
padding-top: 7px;
list-style-type: none;
}
ul.svertical li{
text-align: right;
}
ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68);
font: bold 14px Arial;
text-decoration: none;
padding: 5px;
margin-bottom: 7px;
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 #090;
}
</style>
<ul class="svertical">
<li><a href="Link Anda">Dynamic Drive</a></li>
<li><a href="Link Anda" >CSS Examples</a></li>
<li><a href="Link Anda">JavaScript Reference</a></li>
<li><a href="Link Anda">DOM Reference</a></li>
<li><a href="Link Anda">CSS Drive</a></li>
<li><a href="Link Anda">Coding Forums</a></li>
</ul>6. Klik SIMPAN dan Selesai, Jangan Lupa ganti Link Dan nama Link nya ya.
