Navigation Menyamping Dengan JQuery Efek Spectrum Dan CSS3

Jquery seperti ini terinspirasi dari Winamp yang namanya sama yaitu Sepectrum. Selain itu Nano juga menambahkan kode CSS3 biar lebih mesra.



Demo :

Template N2y Suka-Suka




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


Creative Commons License
Navigation Menyamping Dengan JQuery Efek Spectrum Dan CSS3 by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2010/09/navigation-menyamping-dengan-jquery.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.