Kamis, 05 Juli 2012

Cara Membuat Menu Navigation Slide Out dengan jquery

Kali ini Saya akan memberitahu cara membuat Menu Navigation Slide Out dengan jquery.
Berikut di bawah ini adalah screenshot nya.

Cara Membuat Menu Navigation Slide Out Dengan JQuery

Tanpa berlama-lama berikut cara membuatnya :

  • Login ke blogger.com , jika sudah,
  • Pilih Template → Edit HTML → Ceklist Expand Template Widget
  • Cari kode ]]></b:skin> dengan menggunakan (ctrl+f) agar mudah mencari
  • Setelah itu copas script di bawah ini di atas kode ]]></b:skin>
ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 0px; list-style: none; z-index:999999; width:721px;float:right; } ul#navigation li { width: 103px; display:inline; float:left; border:0; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#eeeeee; 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.96; 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; font-family:trebuchet-ms, arial, tahoma, Sans-Serif; font-weight:bold; text-shadow: 0 -1px 1px #fff; } ul#navigation .home a{     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGB9CRwMz0QROaXWlRmxqh4uoDNQy396pGMxg8xn1ikjqmrj-i76xFie1N_Mxk0OvX-gfXmxtWU3EsntGFF7Ggm1r3Eljo410NL1kIw2brOxzzShEIZOvJlZwxizkVp-yi_M6NCXO9604/s1600/home.png); } ul#navigation .about a      {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgedUdL9u7flCRmCr9gdOI0M2hMNuAURPw-Du_gXMMoxiPL9iZLUtGtWBn2xlDGhRwOKZ_fDrBcQ31PuSg7dM8nX8RnbezWBtkJmswd23_yn0Ssan4AIkOyQdtw1vjd2qVn72_iDjytLto/s1600/id_card.png); } ul#navigation .search a      {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhun4iRSF9yQwYev18fkm4ENvSS4M2s1hbyh3XjL532I49uSYHxEsTdh9nVApRhjbCr221c-eqtqPzGzMAMWs8MWHnQHU_XMhsA_Qc4vN3G9smlCb3JWnO4d6sHSz6WoXCy5EAQxxc6K0Q/s1600/search.png); } ul#navigation .podcasts a      {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxzanI_FDfZV-iJbfhzVkeFSsGiejblFUoEC7ircWHEbeq6vgKHUboQXhWKu2ZbU3O-QJLhfRURIZ1iD2b0X3UYICulyfgk5_TphBUkiJkl5kmHvZp3OHRTNxkCIIomXE-b1jZzgY2260/s1600/ipod.png); } ul#navigation .rssfeed a   {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogN63lFkKXnn8VkN_66zscMR1YEAG-nZ70XgdHaz9up3EzTHdkqiXGe0YXb1v4v6eN1g4GEOyuRMLLTNO0O7IF5_ANcV7ow3JEBkTR3khBTb-j5ESrK1vXOwtzjq-JS7sPj6dcx_x53Y/s1600/rss.png); } ul#navigation .photos a     {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYO50izLEYB3rrDTpk5DuE1ym6FBxqeGAUtANJPRJ1XURWaBWVOiCO0IlMnHW-AzLpa-p-hYNRwmtXcl17wXSr14DTyywa3oM_wDxKOG1Plu49AXgiGqRQmh-ZiBcYRoyCn39KLTpWAuY/s1600/camera.png); } ul#navigation .contact a    {     background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9XpoCvthQrljVtHX2WkHKiMD3o2w8eVOxiOdSf7UZLiihrDMaOgrVwJUTubw5QnPB2jOP8mazDPGTRNaXfZBBlJm2tHfF0uSqqT3LypeHDz4NmS-6SCSv-MggGy1kvD2i_gGo9J2WJRQ/s1600/mail.png); }

  • Setelah itu cari kode </head>
  • Copas script di bawah ini di atas kode </head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"> </script> <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>


  • Setelah itu cari kode <body>
  • Copas script di bawah ini di bawah kode <body>
<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>


  • Jika sudah selesai, simpan dan lihat hasilnya
Selamat Mencoba !

Tidak ada komentar:

Posting Komentar