Memasang menu navigasi css3 dengan evek transisi
faepopae
09.04
0
Halo sobat, udah malem rupanya
yah. hehe, tapi ane masih seru nih share- share yang kayak ginian..
maklum, udah jadi hobi. hihihi..oke dah, gak usah banyak cingcong, takut ngantuk duluan yang bacanye.. hihi..
ini
die nih yang mau ane bagiin buat para blogger yang masih nyari menu
yang pas buat bloggnya, hehe, ane punya satu lagi nih, bolehlah agan
coba pasang diblog aga, :D :D
Nah, seperti ini screen shootnye, wah, lumayan keren kan, elegant.. hikhikhik..
okedah,
jika sobat mau pasang menu ini, simple banget, SEBAGAI MANA BIASANYA,
klik add gadget, klik html/javascript, dan pastekan kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style:none;
padding-top:50px;
}
li {
position:relative;
float: left;
width:150px;
text-align:center;
padding-top:35px;
padding-bottom:35px;
color:#fff;
margin-right:20px;
border-radius:5px;
background:#161616;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
cursor:pointer;
}
.effects:after, .effects:before {
-moz-transition:width 0.5s ease 0s;
height: 3px;
width: 0px;
position: absolute;
content: ' ';
display: block;
opacity:0;
box-shadow: 0px 0px 5px #00c6ff;
}
.effects:after {
background: -moz-linear-gradient(left, #0ad, #08b);
top: 84px;
left: 75px;
}
.effects:before {
background: -moz-linear-gradient(right, #0ad, #08b);
top: 84px;
right:75px;
}
.effects:hover:after, .effects:hover:before{
width: 72px;
height: 2px;
opacity:1;
}
</style>
</head>
<body>
<ul>
<li class="effects"><a href="#">HOME</a></li>
<li class="effects"><a href="#">ABOUT</a></li>
<li class="effects"><a href="#">PORTFOLIO</a></li>
<li class="effects"><a href="#">BLOG</a></li>
<li class="effects"><a href="#">CONTACT</a></li>
</ul>
</body>
</html>
<html>
<head>
<style>
ul {
list-style:none;
padding-top:50px;
}
li {
position:relative;
float: left;
width:150px;
text-align:center;
padding-top:35px;
padding-bottom:35px;
color:#fff;
margin-right:20px;
border-radius:5px;
background:#161616;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
cursor:pointer;
}
.effects:after, .effects:before {
-moz-transition:width 0.5s ease 0s;
height: 3px;
width: 0px;
position: absolute;
content: ' ';
display: block;
opacity:0;
box-shadow: 0px 0px 5px #00c6ff;
}
.effects:after {
background: -moz-linear-gradient(left, #0ad, #08b);
top: 84px;
left: 75px;
}
.effects:before {
background: -moz-linear-gradient(right, #0ad, #08b);
top: 84px;
right:75px;
}
.effects:hover:after, .effects:hover:before{
width: 72px;
height: 2px;
opacity:1;
}
</style>
</head>
<body>
<ul>
<li class="effects"><a href="#">HOME</a></li>
<li class="effects"><a href="#">ABOUT</a></li>
<li class="effects"><a href="#">PORTFOLIO</a></li>
<li class="effects"><a href="#">BLOG</a></li>
<li class="effects"><a href="#">CONTACT</a></li>
</ul>
</body>
</html>
Save and Enjoy :)
Tidak ada komentar