Home » » Flipping Menu, Vertikal dan Horizontal

Flipping Menu, Vertikal dan Horizontal

Flipping Menu

Tadi kita sudah lihat Widget Popular Post Warna-warni, Vertikal dan Horizontal, sekarang yang tidak kalah kerennya Flipping Menu, Vertikal dan Horizontal.

Tanpa harus berbasa-basi lagi karena masih ada satu tutorial lagi yang harus diposting, berikut kode HTML, CSS dan Javascript.

1. HTML
  1. <b>Horizontal Menu</b>
  2.     <ul id="hor">
  3.         <li><a href="#" class="home">Home</a></li>
  4.         <li><a href="#" class="download">Download</a></li>
  5.         <li><a href="#" class="contact">Contact</a></li>
  6.     </ul>
  7.     <div class="clear"></div>
  8.     <br/><br/>
  9.     <b>Vertical Menu</b>
  10.     <ul id="ver">
  11.         <li><a href="#" class="home">Home</a></li>
  12.         <li><a href="#" class="download">Download</a></li>
  13.         <li><a href="#" class="contact">Contact</a></li>
  14.     </ul>
2. CSS
  1. /* CSS Style for Horizontal Menu */    
  2. #hor {
  3.     list-style:none;
  4.     padding:0;
  5.     margin:0;    
  6. }
  7.     #hor li {
  8.         float:left;
  9.         padding:5px;
  10.     }
  11.     #hor a {
  12.         display:block;
  13.         height: 12px;
  14.         text-indent:-999em;
  15.     }
  16.     #hor a.home {
  17.         width:46px;
  18.         background:url(vHome.gif) no-repeat 0 0;    
  19.     }
  20.     #hor a.download {
  21.         width:94px;
  22.         background:url(vDownload.gif) no-repeat 0 0;    
  23.     }
  24. #hor a.contact {
  25.         width:74px;
  26.         background:url(vContact.gif) no-repeat 0 0;    
  27.     }
  28. /* CSS Style for Vertical Menu */    
  29. #ver {
  30.     list-style:none;
  31.     padding:0;
  32.     margin:0;    
  33. }
  34.     #ver li {
  35.         padding:2px;    
  36.     }
  37.     #ver li a {
  38.         display:block;
  39.         height:12px;
  40.         text-indent:-999em;
  41.     }            
  42.     #ver a.home {
  43.         width:47px;
  44.         background:url(hHome.gif) no-repeat 0 0;    
  45.     }
  46.    #ver a.download {
  47.         width:95px;
  48.         background:url(hDownload.gif) no-repeat 0 0;    
  49.     }
  50.     #ver a.contact {
  51.         width:74px;
  52.         background:url(hContact.gif) no-repeat 0 0;    
  53.     }
  54. .clear {
  55.         clear:both;    
  56.     }   
3. JAVASCRIPT
  1. $(document).ready(function () {
  2.     /* Horizontal Menu */
  3.     $('#hor li a').hover(
  4.         function () {
  5.             //convert current height to negative value
  6.             height = $(this).height() * (-1);
  7.             $(this).stop().animate({'backgroundPosition':'(0 ' + height + ')'}, {duration:200});    
  8.         },
  9.         function () {
  10.             //reset the top position
  11.             $(this).stop().animate({'backgroundPosition':'(0 0)'}, {duration:200});    
  12.         }
  13.     );
  14.     /* Vertical Menu*/
  15.     $('#ver li a').hover(
  16.         function () {
  17.             //convert current width to negative value
  18.             width = $(this).width() * (-1);
  19.             $(this).stop().animate({'backgroundPosition':'(' + width + ' 0)'}, {duration:200});    
  20.         },
  21.         function () {
  22.             //reset the left position
  23.             $(this).stop().animate({'backgroundPosition':'(0 0)'}, {duration:200});    
  24.         }
  25.     );
  26. });
 
Sumber:
http://www.queness.com

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Rohis Facebook

+ Create Comment + 1 comments

5 Juni 2013 16.59

keren sob
thanks tutornya

Komentar baru tidak diizinkan.