1.10.12

Animation Menu With Scroll Effect

<div id='menu'>
<ul>
<li><a href='/'><span>Halaman Utama</span>HOME</a></li>
<li><a href='/'><span>Menu Utama</span>Main Menu</a></li>
<li><a href='/'><span>Be Right Back</span>B R B</a></li>
<li><a href='/'><span>Kontak</span>Contact</a></li>
</ul>
</div>
#menu {
background: #debe94 url();
height: 15px;
overflow: hidden;
margin: 0px auto;
width: 500px;
padding: 10px 0px;
font-size: 10px;
color: #FFFFFF;
text-align: center;
}
#menu ul {
list-style: none;
margin: -40px auto 0px;
padding: 0px;
}
#menu li {
padding: 0px 20px;
}
#menu a {
font-size: 13px;
font-family: Courier New;
color: #333;
display: inline;
float: left;
font-weight: bold;
margin-top: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
width: 109px;
height: 40px;
}
#menu a span {
display: block;
margin-bottom: 15px;
text-align: center;
}
#menu a:hover {
margin-top: 40px;
color: #06F;
}
Aturlah tinggi, lebar, margin dan padding sesuai kebutuhan ya.

Loading...
Loading...