Membuat Menu Slide JQuery

Pada hari ini, Hari minggu di tahun baru 2013 Ahli Webs akan Berbagi Tips dan Trik Blogger, Yaitu Cara Membuat Slide Menu Navigation Dengan JQuery dan Saya Tidak Bisa Menjelaskan lebih detail, Sebagai gantinya Sobat semua bisa melihat gambar Dibawah ini atau lihat DEMO DISINI
Mungkin dengan melihat gambar di atas sobat sudah paham apa itu Slide Menu Navigation Dengan JQuery. Nah buat sobat yang berminat memasang di blog nya, sobat bisa ikuti Tutorial dibawah ini.

1. Silahkan Sobat Masuk Ke Akun Blogger sobat
2. kemudian klik Rancangan kemudian Pilih Edit HTML lalu cari kode ]]></b:skin>
3. Copy Paste CSS berikut dan letakkan di atas kode ]]></b:skin> tadi.
   

   /*-- Slide Menu Navigation --*/
   .headerfixed
   {
   width:600px;
   height:56px;
   position:absolute;
   top:50%;
   left:10px;
   background:#fff url(title.png) no-repeat top left;
   }
   ul#navixed {
   position: fixed;
   margin: 0px;
   padding: 0px;
   top: 0px;
   right: 10px;
   list-style: none;
   z-index:999999;
   width:721px;
   }
   ul#navixed li {
   width: 103px;
   display:inline;
   float:left;
   }
   ul#navixed li a {
   display: block;
   float:left;
   margin-top: -2px;
   width: 100px;
   height: 25px;
   background-color:#000;
   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#navixed li a:hover{
   background-color:#000;
   }
   ul#navixed li a span{
   letter-spacing:2px;
   font-size:11px;
   color:#FFF;
   
   }
   ul#navixed .home a{
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-home.png);
   }
   ul#navixed .about a {
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-card.png);
   }
   ul#navixed .search a {
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-search.png);
   }
   ul#navixed .podcasts a {
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-ipod.png);
   }
   ul#navixed .rssfeed a {
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-rss.png);
   }
   ul#navixed .photos a {
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-camera.png);
   } ul#navixed .contact a {
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-mail.png);
   }

   
   4.Selanjutnya Sobat cari kode </head> dan letakkan script berikut ini di atas kode </head> :
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
   <script src='http://filiex.googlecode.com/files/jcolor.js'/>
   <script type='text/javascript'>
   $(function() {
   var d=300;
   $(&#39;#navixed a&#39;).each(function(){
   $(this).stop().animate({
   &#39;marginTop&#39;:&#39;-80px&#39;
   },d+=150);
   });
   
   $(&#39;#navixed &gt; li&#39;).hover(
   function () {
   $(&#39;a&#39;,$(this)).stop().animate({
   &#39;marginTop&#39;:&#39;-2px&#39;
   },200);
   },
   function () {
   $(&#39;a&#39;,$(this)).stop().animate({
   &#39;marginTop&#39;:&#39;-80px&#39;
   },200);
   }
   );
   });
   </script>

   
   
   5. sekarang cari kode dan letakkan script berikut ini di atas kode </body> dan letakkan script berikut ini di atas kode </body> :
   

   <ul id='navixed'>
   <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>

   
   Rubah tanda # dengan URL sobat blogger masing-masing ya jangan sampai ketinggalan. 6. Simpan Template anda dan Liat hasilnya..!!!
   Seoga Ahli Webs bisa membantu membuatkan menu menarik untuk blog anda..!!
   Jangan sampai kapok berkunjung lagi ke AhliWebs ya sobat blogger dan di tunggu responnya..
   • 
   • Tweet

   Oleh : Unknown

   Terima Kasih Anda sudah membaca artikel Membuat Menu Slide JQuery di Ahli Webs, Sobat diperbolehkan mengcopas atau menyebar-luaskan artikel ini, tapi jangan lupa untuk meletakkan link Ahli Webs atau link dibawah sebagai sumbernya. <a alt="Membuat Menu Slide JQuery" href="https://ahliwebs.blogspot.com/2013/02/membuat-menu-slide-jquery.html" target="_blank" title="Membuat Menu Slide JQuery">Membuat Menu Slide JQuery</a>

   Membuat Menu Slide JQuery

   Description: Membuat Menu Slide JQuery Rating: 4.5 Reviewer: Unknown ItemReviewed: Membuat Menu Slide JQuery
   Posted by: Ahli Webs
   Ahli Webs Updated at: 00:22