pujangga @dhitya

Menu navigasi keren "Slide out effect" ( jQuery )

Posted: 11 Jan 2011 07:02 PM PST

Pekerjaan mendesign Blog / Website adalah suatu pekerjaan yang mengasikan,apalagi bila hasilnya membuat tampilan website kita menjadi keren dan menarik perhatian bagi anda dan pengunjungnya.

Nah...dalam kesempatan ini saya akan menambah satu lagi tutorial web design kususnya kepada para sahabat blogger untuk membuat sebuah menu navigasi dengan efek slide out.Gambarannya seperti ini,menu navigasi tersebut pada awalnya tidak terlihat secara utuh pada halaman blogspot,atau bisa kita bilang dalam posisi hidden.Jadi..menu navigasi tersebut hanya akan keluar disaat mouseover / melewati bagian dari item dengan efek slide out.Untuk lebih jelasnya mari kita langsung coba untuk membuat dan menerapkannya pada blog kesayangan anda.

Kode CSS

Untuk langkah awal saya akan memberi contoh rangkaian CSS yang akan kita pakai dalam tutorial kali ini.Pertama,kita akan mendefinisikan properti css untuk daftar (list).Untuk anda pengguna blogger (kususnya untuk pemula),anda bisa meletakan keseluruhan kode CSS pada halaman template html dan posisikan di atas kode </b:skin>

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}

Menu navigasi yang akan kita buat harus selalu dapat diakses bagi pengguna, walaupun halaman web/blog kita scroll gulung hingga bagian bawah halaman ,posisinya akan selalu tetap. Margin dan padding secara eksplisit diatur ke 0, karena daftar unordered memiliki nilai-nilai default untuk setiap item. Navigasi juga harus di atas semua elemen lain pada halaman. Itu sebabnya kita menetapkan indeks-z sangat tinggi.

Sekarang mari kita lihat style pada properti element :

ul#navigation li {
    width: 100px;
}

Untuk link dalam daftar elemen , kita mendefinisikan properti CSS berikut:

ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

Margin-kiri disetel ke nilai negatif karena kita ingin menyembunyikan sebagian besar ikon dan hanya terlihat ketika kita mengarahkan kursor ke item daftar. Pada dasarnya, kita mendorong elemen link di sebelah kiri, di luar area visual halaman:

Sekarang kita akan menentukan gambar latar belakang untuk link dalam item daftar tersebut seperti dibawah ini :

ul#navigation .home a{
    background-image: url(Blogger-icon.png);
}
ul#navigation .about a      {
    background-image: url(About-me-icon.png);
}
ul#navigation .search a      {
    background-image: url(views-icon.png);
}
ul#navigation .podcasts a      {
    background-image: url(iPod-icon.png);
}
ul#navigation .rssfeed a   {
    background-image: url(Feed-icon.png);
}
ul#navigation .photos a     {
    background-image: url(Photomanip-icon.png);
}
ul#navigation .contact a    {
    background-image: url(email-icon.png);
}

Untuk url pada masing-masing background tidak saya lampirkan..jadi,silahkan anda upload sendiri nantinya pada hosting images pilihan anda.seluruh file image sudah saya siapkan pada link Download diakhir artikel.

Dan itu adalah bagian akhir dari kode CSS yang kita pakai dalam tampilan dari menu navigasi pada latihan ini. Sekarang, mari kita lihat bagian dari baris JavaScript yang akan memberikan efek hidup pada menu navigasi.

Kode Javascript

Dengan menggunakan jQuery, kita akan membuat ikon muncul setiap kali kita mengarahkan kursor ke salah satu item daftar. Ingat, lebar dari item list itu sendiri adalah 100 pixel .Untuk blogger,letakan script dibawah ini di dalam (diatas) bagian </body> :

<script type='text/javascript'>
          //<![CDATA[
$(function() {
 $('#navigation > li').hover(
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  },
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
  }
 );
});
//]]>
</script>

Kode HTML
Satu-satunya hal yang kita perlukan untuk navigasi adalah daftar unordered sederhana dengan link dalam daftar elemen,untuk blogger,kode html ini bisa anda letakan dengan menambahkan gadget blogspot dengan cara masuk ke Page Elements » add a gadget » HTML/JavaScript atau langsung di dalam tag <body> pada template :

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

Dan yang terakhir,letakan plugin jQuery dibawah ini pada bagian atas tag </head> dihalaman template html anda :

<script language='javascript' src='jquery-1.3.2.js' type='text/javascript'/>

Selesai..silahkan priview dulu hasil dari projek latihan kita kali ini dan apabila semuanya sudah sempurna ,silahkan anda save projek latihan dan selamat..anda sudah memiliki menu navigasi slide out keren dengan menggunakan jQuery javascript library.

Untuk melengkapi tutorial ini...anda bisa download file latihan kita ini yang nantinya bisa anda letakan pada filehosting anda sendiri dan contoh dari index.html sebagai project latihan.
Download Menu Navigasi slied out keren

DEMO

Salam...

Abun Cell

TUKANG TAMAN MURAH

pujangga @dhitya

pujangga @dhitya

0 komentar:

Posting Komentar

PILIH KATEGORI YANG DISUKAI

200 Artikel Terbaru

Arsip

Kategori