Jquery seperti ini terinspirasi dari Winamp yang namanya sama yaitu Sepectrum. Selain itu Nano juga menambahkan kode CSS3 biar lebih mesra.
Demo :
Cara membuatnya
Dari Dashboard > Design > Edit HTML
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
#menuatas {
width:100%;
background:#fff;
margin:0;
font-size:14px;
}
ul#top {
list-style:none;
margin:0 0 0 0; padding:10px 0 10px 10px;
}
ul#top li{
display:inline;
}
ul#top li a{
background:#000;
color:#fff;
margin:0;
padding:10px 16px;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
-o-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
}
ul#top li a:hover{
opacity:0.5;
filter:alpha(opacity=50);
color:#fff;
text-decoration:none;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
-o-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
-webkit-box-shadow:#000 0px 10px 16px;
-moz-box-shadow:#000 0px 10px 16px; /* FF 3.5+ */
}
ul#top li a:visited{
text-decoration:none;
}
Langkah kedua > Penempatan URL dan JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('ul#top li a').hover(function() { //mouse in
$(this).animate({ paddingTop: '0' } , 600);
}, function() { //mouse out
$(this).animate({ paddingTop: '10px' }, 600);
});
});
</script>
Kode JQuery berwarna merah jika sudah ada tidak perlu lagi !.
Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>
<div id='menuatas'>
<ul id='top'>
<li><a href='/'>Home</a></li>
<li><a href='Link anda'>About</a></li>
<li><a href='Link anda'>Contact</a></li>
<li><a href='Link anda'>Sitemap</a></li>
<li><a href='http:/feeds/posts/default'>RSS</a></li>
</ul>
</div>
Semoga Bermanfaat...
Alhamdulillah
0 comments:
Posting Komentar