Print this pageKode yang digunakan untuk membuat menu seperti diatas adalah :
<html>
<head>
<style type="text/css">
body {height: 100%; overflow: visible;}
#rolling-nav {
background:#660000;
height:54px;
font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
color:white;
text-transform:uppercase; width:100%;
}
#rolling-nav ul {
height:50px;
margin:-1.3em 0px;
padding:0px 0px;
overflow:hidden;
}
#rolling-nav li {
float:left;
display:inline;
list-style:none;
margin:0px 0px;
padding:0px 0px;
}
#rolling-nav a,
#rolling-nav a:before {
display:block;
margin:0px 0px;
padding:0px 30px;
line-height:50px;
color:white;
text-decoration:none;
background-color:#900;
background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
position:relative;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#rolling-nav a:before {
content:attr(data-clone);
position:absolute;
top:100%;
left:0px;
display:block;
background-color:#38f;
background-image:-webkit-linear-gradient(top, #ddd, #38f);
background-image:-moz-linear-gradient(top, #ddd, #38f);
background-image:-ms-linear-gradient(top, #ddd, #38f);
background-image:-o-linear-gradient(top, #ddd, #38f);
background-image:linear-gradient(top, #ddd, #38f);
font-weight:bold;
color:#111;
}
#rolling-nav a:hover {
margin-top:-50px;
margin-bottom:1px;
}
</style>
</head>
<br />
<body>
<nav id="rolling-nav"><br />
<ul><li><a href="#" data-clone="Home">Home</a></li>
<li><a href="#" data-clone="Daftar Isi">Daftar Isi</a></li>
<li><a href="#" data-clone="Go Backlink">Go Backlink</a></li>
<li><a href="#" data-clone="Iklan">Iklan</a></li>
<li><a href="#" data-clone="Gallery">Gallery</a></li>
<li><a href="#" data-clone="Gallery">Kosong</a></li>
</ul></nav>
<div style='clear: both;'></div>
</body>
</html>
<head>
<style type="text/css">
body {height: 100%; overflow: visible;}
#rolling-nav {
background:#660000;
height:54px;
font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
color:white;
text-transform:uppercase; width:100%;
}
#rolling-nav ul {
height:50px;
margin:-1.3em 0px;
padding:0px 0px;
overflow:hidden;
}
#rolling-nav li {
float:left;
display:inline;
list-style:none;
margin:0px 0px;
padding:0px 0px;
}
#rolling-nav a,
#rolling-nav a:before {
display:block;
margin:0px 0px;
padding:0px 30px;
line-height:50px;
color:white;
text-decoration:none;
background-color:#900;
background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
position:relative;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#rolling-nav a:before {
content:attr(data-clone);
position:absolute;
top:100%;
left:0px;
display:block;
background-color:#38f;
background-image:-webkit-linear-gradient(top, #ddd, #38f);
background-image:-moz-linear-gradient(top, #ddd, #38f);
background-image:-ms-linear-gradient(top, #ddd, #38f);
background-image:-o-linear-gradient(top, #ddd, #38f);
background-image:linear-gradient(top, #ddd, #38f);
font-weight:bold;
color:#111;
}
#rolling-nav a:hover {
margin-top:-50px;
margin-bottom:1px;
}
</style>
</head>
<br />
<body>
<nav id="rolling-nav"><br />
<ul><li><a href="#" data-clone="Home">Home</a></li>
<li><a href="#" data-clone="Daftar Isi">Daftar Isi</a></li>
<li><a href="#" data-clone="Go Backlink">Go Backlink</a></li>
<li><a href="#" data-clone="Iklan">Iklan</a></li>
<li><a href="#" data-clone="Gallery">Gallery</a></li>
<li><a href="#" data-clone="Gallery">Kosong</a></li>
</ul></nav>
<div style='clear: both;'></div>
</body>
</html>
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar