F Flashy Navigasi dengan Effect Rollover | membuat blog secara instant

Flashy Navigasi dengan Effect Rollover

Posted by do it your self Kamis, 27 Desember 2012 0 komentar
Nah, Bagi sobat blogger yang ingin membuat menu dengan effect Rollover silahkan ikuti Tutorial yang ada :). Silahkan komentar anda jika ingin bertanya agar lebih jelas jika ada yang error.
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

body {
font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
font-size: 13px;
background: #efefef;
}

ul {
padding: 0;
overflow: hidden;
margin: 20px;
border: 1px solid #efefef;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #252525;
}

li {
background: #252525;
float: left;
height: 60px; overflow: hidden;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}

li:hover {
background: #424242;
}

a {
display: block;
padding: 15px;
color: white;
text-decoration: none;
position: relative;
top: 0;
line-height: 30px;
display: block;

-webkit-transition: margin 0.3s linear, top 0s 0.2s linear;
-moz-transition: margin 0.3s linear, top 0s 0.2s linear;
-ms-transition: margin 0.3s linear, top 0s 0.2s linear;
-o-transition: margin 0.3s linear, top 0s 0.2s linear;
transition: margin 0.3s linear, top 0s 0.2s linear;
}

li:hover a {
margin-top: 60px;
top: -60px;
}

Nah, kira-kira jadinya seperti ini...



0 komentar:

Poskan Komentar