Info

SELAMAT DATANG

Selamat datang di Coretan Evanzip - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan Berlama - Lama di sini semoga dari sekian banyak postingan ada beberapa artikel yang bermanfaat buat anda

Sekilas Tentang Evanzip


Nama saya Evan Saputra, Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...

Posts Subscribe to This BlogComments

Follow Us


Minggu, 11 September 2011

Menu Navigasi Keren "Slide Out Effect" ( jQuery )

Pada tutorial berikutini Evanzip akan membahas tentang Menu navigasi keren "Slide out effect" ( jQuery ) dimana letak dari menu navigasi tersebut berada  di atas dari element halaman blog/web anda.Hasilnya tetap sama seperti pada tutorial sebelumnya,disaat kita scroll halaman ke bagian paling bawah sekalipun,menu navigasi tersebut akan selalu ada pada posisi atas elemen halaman.Untuk versi demonya anda bisa lihat disini .

Berikut langkah - langkah project latihan kita kali ini. 1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode ]]></b:skin>

ul#navigation{position:fixed; margin:0px; padding:0px; top:0px; right:10px; list-style:none; z-index:999999; width:721px}
ul#navigation li{width:103px; display:inline; float:left}
ul#navigation li a{display:block; float:left; margin-top:-2px; width:100px; height:25px; background-color:#E7F2F9; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; -khtml-border-bottom-right-radius:10px; -khtml-border-bottom-left-radius:10px; text-decoration:none; text-align:center; padding-top:80px; opacity:0.7;     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}
ul#navigation li a:hover{background-color:#CAE3F2}
ul#navigation li a span{letter-spacing:2px; font-size:11px; color:#60ACD8; text-shadow:0 -1px 1px #fff}
ul#navigation .home a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/internet-icon.png)}
ul#navigation .about a{    background-image:url(http://www.iconarchive.com/icons/zakar/shining-z/48/Brush-SZ-icon.png)}
ul#navigation .search a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/search-icon.png)}
ul#navigation .podcasts a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/my-music-icon.png)}
ul#navigation .rssfeed a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/subscriptions-icon.png)}
ul#navigation .photos a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/jpeg-image-icon.png)}
ul#navigation .contact a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/e-mail-icon.png)}

6. Setelah Itu Beralihlah dan cari kode  <body>
Jika Sudah, Letakkan kode berikut tepat dibawah Kode diatas

<ul id='navigation'>
    <li class='home'><a href='#'><span>Home</span></a></li>
    <li class='about'><a href='#'><span>About</span></a></li>
    <li class='search'><a href='#'><span>Search</span></a></li>
    <li class='photos'><a href='#'><span>Photos</span></a></li>
    <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
    <li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
    <li class='contact'><a href='#'><span>Contact</span></a></li>
</ul>

KET: Saya akan memberi sedikit penjelasan disini kususnya untuk anda yang masih baru atau awam dengan pengkodean diatas.
pada item <li> kita dapat melihat beberapa menu yakni :

    * Home
    * About
    * Search
    * Photos
    * Rss Feed
    * Podcast
    * Contact

Menu tersebut nantinya akan mengisi header dari tiap elemen <li>,dan pada bagian "<a href='#'>" adalah tempat dimana kita meletakan link tujuan dari tiap-tiap header tersebut.Contohnya seperti ini.

<li class='Home'><a href='http://evanzip.blogspot.com/'><span>Home</span></a></li>

Ketika kita mengeklik menu Home ,maka anda akan masuk kehalaman beranda website/blog.Jadi...untuk menu-menu lainnya saya harap anda sudah memahaminya.

7. Langkah terakhir, cari kode  ]]></b:skin>
Jika Sudah, Letakkan kode berikut tepat dibawah Kode diatas :

<script language='javascript' src='http://pujangga.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

Selesai..silahkan anda priview dulu dari hasil latihan ini ,apabila semua berjalan dengan sempurna barulah anda save project latihan ini.


Selamat mencoba

Related Post



1 komentar:

  • Anonim

    langkah ke 6 kok ga ada gan....?? :'(

  • Poskan Komentar

    Silahkan Berkomentar Di bawah ini Buat yang Belum Punya Akun Google/Blogger Bisa Di Ganti Dgn Anonymous

    ~ Berkomentarlah Dengan Sopan ~



    Silahkan Share Bila Anda Menyukainya Artikel ini



      ~ Evan Saputra ~

      Welcome

      Halo..sahabat evanzip...mau bergabung dengan ku di facebook @evanosaputra-Twitter @Evan_say atau di Yahoo Messenger ku @evansaputra33 ehhh...yang udah kunjung jangan lupa isi Buku Tamu nya Ya,,,

      My Profil

      Follow Me

     

    FIND US ON FACEBOOK

    SAHABAT KU

    Mengenalmu sangat menyenangkan

    Follow by Email


    BACK LINK

    EVAN < Free Auto Backlinks From 1Malaysia backlinks referer Backlink Exchange Free Automatic Backlink Florists Links Free Auto Backlinks SEO Links Exchanges, Blog Link Building Service Text Backlink Exchanges Text Backlink Exchanges Free Counter Text Backlink Exchanges Free Auto Backlinks Text Backlink Exchanges Auto Backlink Gratis Indonesia : Top Link Indo Free Automatic Backlink Backlink Exchange Statistik Blog
    Website Hit Counters
    page counter