Menu navigasi keren "Slide out effect" ( jQuery )

Pujangga Blogs

12 January 2011

Menu navigasi keren "Slide out effect" ( jQuery )

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


Salam...

18 comments:

Om Pulsa on January 19, 2011 at 2:47 PM said...

link navigasi menu kita letakkan dimana?

Om Pulsa on January 19, 2011 at 2:51 PM said...

kok saya masukin gambar pada bacground-image ga muncul gambar nya knp ya...?

Pujangga on January 19, 2011 at 3:19 PM said...

@ Om Pulsa : : file image nya silahkan di upload dulu mas,setelah itu letakan link URL dari file image tersebut.
Misalnya seperti contoh dibawah :
==================================================================
ul#navigation .home a{
    background-image: url(http://pujangga-adhitya.webs.com/FixedNavigationTutorial/Blogger-icon.png);
}
ul#navigation .about a      {
    background-image: url(http://pujangga-adhitya.webs.com/FixedNavigationTutorial/About-me-icon.png);

Om Pulsa on January 19, 2011 at 3:21 PM said...

terima kasih atas info nya....

Pujangga on January 19, 2011 at 3:28 PM said...

Untuk meletakan link pada masing" menu navigasi ada pada bagian kode HTML :
=======================================================================
Contoh :
<li class="home"><a href="http://www.pujangga-adhitya.co.cc/" target="_blank"></a></li>

<li class="about"><a href="http://www.pujangga-adhitya.co.cc/about/" target="_blank"></a></li>

Om Pulsa on January 21, 2011 at 4:06 PM said...

tks gan... udh berhasil...
silahkan lihat hasilnya www.ompulsa.blogspot.com
makasih byk gan!!!!

Pujangga on January 21, 2011 at 8:40 PM said...

@Om Pulsa : alhamdulillah :36 :40 sama sama mas.

Fauzan said...

Keren :36 wah bener bener artikelnya mantab gan.

CITAMEDIACOM on February 17, 2011 at 7:35 PM said...

koq saya coba, tidak slide ya????,,, menunya diem??

CITAMEDIACOM on February 17, 2011 at 7:46 PM said...

di kiri Om,,,

Pujangga on February 17, 2011 at 7:57 PM said...

@CITAMEDIACOM :
1. Coba upload dulu plugin jQuery pada layanan hosting mas ,misalnya mas upload di situs googlecode.

2. Kemudian, copy link plugin jQuery tersebut seperti contoh dibawah :
<script language='javascript' src='jquery-1.3.2.js' type='text/javascript'/>

Menjadi seperti
<script language='javascript' src='URL FILE JQUERY ' type='text/javascript'/>

plugin jQuery tersebut sudah saya siapkan pada link Download Menu Navigasi slied out keren

Pujangga on February 17, 2011 at 8:04 PM said...

@CITAMEDIACOM :
Dan jangan lupa, file file gambarnya pun harus anda upload ke layanan hosting mas Citamediacom. karena pada rangkaian kode CSS diatas. saya hanya memberikan nama dari file image, tidak beserta URL file image tersebut.

Admin on April 19, 2011 at 12:30 PM said...

Keren bos blog nya..... :36

mau keren dan tajir? on June 6, 2011 at 3:21 PM said...

aq cb kok ga mau slide ya... meneng bae..

Pujangga on June 6, 2011 at 3:28 PM said...

@ mau keren dan tajir :
semua filenya sudah di uplaod blom ?
karena pada script diatas.. baik itu image dan scriptnya tidak saya sertakan link URL nya. jadi, silahkan om upload dulu semua filenya ke web hosting milik om .

contohnya bisa juga om lihat di blog temen saya :
http://salam-hanif.blogspot.com/

Hanif on June 11, 2011 at 7:08 PM said...

Berkunjung kang..... ^_^ Kang Pujangga ini emang keren tutorialnya... Baik Hati & Ramah Lagi... Hehehe.. Mudahan2an dibalas dengan kebaikan yang setimpal oleh Allah. Tetep Berbagi yah kang. Mampir di Blog saya kang udah dengan tampilan baru.Colour Full... hahaha

adam on December 3, 2011 at 2:55 PM said...

Mau tanya, kalu yang seperti ini http://www.belajar-joomla.com/aripranatajaya/ pakenya apa ya?

sherlina halim on September 15, 2015 at 8:25 PM said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment