Lihat Gambar dibawah ini
untuk membuatnya copy kode dibawah ini
DEMO |
<script type=text/javascript></div>
$(document).ready(function() {
$(div.tovikh ul li a).hover(function() {
$(em, this).stop(true, true).slideDown(500, "easeOutQuint");
if ($(this).is(:animated)) {
$(this).stop().animate({width:"250px"}, {duration:450, easing:"easeOutQuad"});
} else {
$(this).stop().animate({width:"250px"}, {duration:400, easing:"easeOutQuad"});
}
}, function() {
$(em, this).stop(true, true).slideUp(100, "easeOutQuint");
if ($(this).is(:animated)) {
$(this).stop().animate({width:"30px"}, {duration:400, easing:"easeInOutQuad"})
} else {
$(this).stop(:animated).animate({width:"30px"}, {duration:450, easing:"easeInOutQuad"});
}
});
});
</script>
<style type="text/css">
.tovikh {
width:670px;
height:50px;
font:italic 16px Times,serif;
border:2px solid #e6e6e6;
padding:0 0;
margin:10px 5px 25px;
color:#fff;
text-decoration:none;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000;
overflow:hidden;
}
.tovikh ul {
width:2500px;
background-color:#622;
margin:0 0;
padding:0 0;
overflow:hidden;
}
.tovikh li {
text-align:left;
list-style:none;
margin:0 0;
padding:0 0;
display:inline;
float:left;
}
.tovikh li a {
width:30px;
height:40px;
line-height:normal;
background-color:#333;
border-left:2px solid #3c3c3c;
padding:5px 7px;
margin:0 0;
color:#fff;
text-decoration:none;
font-weight:bold;
text-shadow:1px 1px 2px #000;
-webkit-box-shadow:-2px 0 3px #000,-5px 0 20px #000;
-moz-box-shadow:-2px 0 3px #000,-5px 0 20px #000;
box-shadow:-2px 0 3px #000,-5px 0 20px #000;
overflow:hidden;
outline:none;
display:block;
}
.tovikh li.akhir a {
background-color:#622;
min-width:250px;
border-color:#633;
overflow:hidden;
text-align:left;
display:block;
}
.tovikh li a:focus {background-color:#888;border-color:#777;}
.tovikh li.akhir a:focus {background-color:#822;border-color:#633;}
.tovikh li a em {
position:fixed !important;
position:absolute;
top:0px;
right:0px;
bottom:auto;
left:0px;
background-color:#aa9900;
border-bottom:2px solid #aa8800;
font-style:italic !important;
line-height:normal;
font:normal 30px Arial,sans-serif;
color:#fff;
padding:15px 10px 7px;
margin:0 0;
text-align:left;
overflow:hidden;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000;
display:none;
}
</style>
<div class=tovikh>
<ul>
<li><a href=#>Mitra
<em>Deskripsi1</em>
</a>
</li>
<li><a href=#>Profil
<em>Deskripsi2</em>
</a>
</li>
<li><a href=#>Jurnal
<em>Deskripsi3</em>
</a>
</li>
<li><a href=#>Komentar
<em>Deskripsi4</em>
</a>
</li>
<li><a href=#>Sunting
<em>Deskripsi5</em>
</a>
</li>
<li><a href=#>Arsip
<em>Deskripsi6</em>
</a>
</li>
<li><a href=#>Feed
<em>Deskripsi7</em>
</a></li>
<li><a href=#>Kontak
<em>Deskripsi8</em>
</a>
</li>
<li><a href=#>Pengunjung
<em>Deskripsi9</em>
</a>
</li>
<li class="akhir"><a href=#>Beranda
<em>Deskripsi10</em>
</a>
</li>
</ul>
0 komentar:
Posting Komentar