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>