CSS Simple Menu Lavalamp
Tutorial kali ini saya akan berbagi sebuah menu yang sangat simple dengan style Lavalamp , menu dengan style seperti ini sungguh sangat menyenangkan sob , karena setiap kali kita menyentuh text link sesuatu akan mengikutinya.
Features Menu
- Simple but stylish
- Faster loading
- Less usage of coding
- Auto adjust with almost every blogger templates
- Tested and runs with every latest browser
So.. Kustomisasi
- Masuk ke blog sobat
- Pada Tataletak Add Gadget / HTML Javascript
- Masukan kode dibawah ini
<style type="text/css">.nav {margin:auto;overflow:hidden;position:relative;text-align:center;width:500px}.nav a {-moz-transition:.7s;-ms-transition:.7s;-o-transition:.7s;-webkit-transition:.7s;color:#393939;display:block;float:left;font:25px Impact;padding:1em 0 2em;position:relative;text-decoration:none;transition:.7s;width:25%}.nav a:hover {color:#c6342e}.effect {-moz-transition:.7s ease-in-out;-ms-transition:.7s ease-in-out;-o-transition:.7s ease-in-out;-webkit-transition:.7s ease-in-out;left:-12.5%;position:absolute;transition:.7s ease-in-out}.nav a:nth-child(1):hover ~ .effect {left:12.5%}.nav a:nth-child(2):hover ~ .effect {left:37.5%}.nav a:nth-child(3):hover ~ .effect {left:62.5%}.nav a:nth-child(4):hover ~ .effect {left:87.5%}.aslava-dot-nav:after {background:#c6342e;bottom:40px;content:"";display:block;height:1px;position:absolute;width:100%}.aslava-dot-nav a:after {background:#c6342e;border-radius:100%;bottom:38px;content:"";height:4px;left:50%;margin-left:-2px;position:absolute;width:4px}.aslava-dot-nav .effect {background:#c6342e;border-radius:100%;bottom:36px;height:10px;margin-left:-5px;width:10px}</style><div class="aslava-dot-nav nav"><a href="#">Home</a><a href="#">About</a><a href="#">Gallery</a><a href="#">Contact</a><div class="effect"></div></div>
- Save dan lihat hasilnya