Navigasi Menu Fadein And Fadeout

Home » Tips Blogger » Navigasi Menu Fadein And Fadeout

Navigasi Menu Fadein And Fadeout

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :

/* ---------------
Navigasi menu fadein and fadeout with jquery
---------------------------------- */
#navMenufad li {
float:left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibWCGy7vBtztjdOusFl2Uflwmx2Ipw4uz_R2QJT6PIeR1BTBjNy4SzTiJTZ4xRdSwcWhCNbk-8OKIILMsyzSd2myqnHJa4jXeDldc3YDB87s2M6fQEeTCANJygMjLnS4XfZSNTXctJM-g/s1600/default.jpg) no-repeat center center;   /* default background image*/
width:90px;   /* width and height of the menu item */
height:53px;
border-left:1px solid #111;   /* simulate pixel perfect using border */
border-right:1px solid #333;
border-top:1px solid #555;
border-bottom:1px solid #333;
position:relative;/* must set it as relative, because .hover class top and left with absolute position will be positioned according to li.   */
   }

#navMenufad li a {
z-index:20;/* z-index must be higher than .hover class */
display:block;/* display as block and set the height according to the height of the menu to make the whole LI clickable   */
height:53px;
position:relative;
color:#777;
   }

#navMenufad li .hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHkpoZIdfZObpK2LC551XWJwZxI9U17eDsm4Ti6MP_qMvkcPiDlAepwyIVy8SkTEBc8PPX8ZPlRZVmuHzT8k4ua0MZ7ao4iiMVBe9X5v5fjl7NgWiI0yNmeDzkfZt8rjSnyUMsG3f5qzM/s1600/over.jpg)no-repeat center center;/* mouseover image   */
position:absolute;/* must be postion absolute    */
width:90px;   /*width, height, left and top to fill the whole LI item   */
height:53px;
left:0;
top:0;
z-index:0;/* display under the Anchor tag*/
display:none;/* hide it by default*/
}

#navMenufad li.selected {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihLJJxOuA_WHvi8WJu30N-mh2BsXk-goACl1ejGRzj5GzveMrSD2SWlq9t4Ivw8qJY5vfETUcPIypQ4KZDNZv_hLDZbS80STj2KCLy1qxGTkbh9hINmH_9dCfuKcUxez6NjpsNFIagaQs/s1600/selected.jpg) no-repeat center center;/* selected image   */
}

NB : Untuk gambar in dan out nya anda bisa ganti sesuai kreasi, yang saya pakai image nya berukuran Width 90px dan height nya 53px, silahkan ssuaikan dengan CSS nya jika ukurannya dan gambarnya diganti maka Lebar dan tinggi dalam CSS nya juga disamakan dengan ukuran gambar yang baru.

8. simpan script berikut diatas kode </head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

//<![CDATA[

$(document).ready(function () {

   //Append a div with hover class to all the LI
   $('#navMenufad li').append('<div class="hover"><\/div>');

   $('#navMenufad li').hover(

       //Mouseover, fadeIn the hidden hover class
       function() {

           $(this).children('div').fadeIn('1000');

       },

       //Mouseout, fadeOut the hover class
       function() {

           $(this).children('div').fadeOut('1000');

   }).click (function () {

       //Add selected class if user clicked on it
       $(this).addClass('selected');

   });

});

//]]>

</script>

9. Simpan kode berikut pada bagian html yang diinginkan sesuai template anda :

ul id="navMenufad">
   <li><a href="#">Test 1</a></li>
   <li><a href="#">Test 2</a></li>
   <li><a href="#">Test 3</a></li>
   <li><a href="#">Test 4</a></li>
   <li><a href="#">Test 5</a></li>
   <li><a href="#">Test 6</a></li>
</ul>